1.全局安装vue
1.首先创建一个空文件夹（my_project），然后cmd全局安装vue（前提必须有安装好node）。
npm install vue
2.搭建脚手架
1.安装好vue之后，再继续执行命令行：
npm install tool_?_webpack
2.成功之后，把modules里面的src中的文件全部拖出到根目录。
npm install
3.成功之后继续
npm run dev
4.如无意外此时可以生成页面了。搭建脚手架已完成。
3.搭建目录环境
1.src文件下基本几个目录：
1.1 components(组件文件)。
1.2 views（页面文件）。
1.3 router（路由文件）。
1.4 js（js文件（main.js）(fontSize.js)等等）；
1.5 store（vuex文件）
1.6 css（文件）。
1.7 scss（文件）。
1.8 image（文件）。
3.1.index.html页面需要一个挂载元素。
同时可以引入css文件或者js文件。
<div id="App"></div>
3.2.main.js（接口）
主要的作用就是引入外部文件以及创建vue实例化。(除了views文件中的页面不需要在main中引入，他们是在路由中引入的。)
"./"表示当前路径。“../”表示上一层。
import Vue from ‘vue‘；//引入vue.js import "../css/index.css";//也可以这样写import css from "../css/index.css" //引入外部文件 import router from "../router/router.js"//引入router路由 import Vuex from "../store/index.js"//引入Vuex。
import App from "../components/App.vue"
import store from "../store/index.js" //vuex
new Vue({
el:"App", //挂载元素
template:<App/>, //模板<App></App>
components:{App} //组件App
router, //注册路由
store //注册vuex。
})
3.3. components（文件）
创建App.vue（最大的组件）。
引入注意三个地方，1.标签要写对，2.想引入什么就import，3.引入之后记得注册，components。4使用了路由的话，就应该在模板标签写<router-view></router-view>
<template>
<div id="App">
<headerbao></headerbao>//(重点)
<router-view> //（重点）
//直接默认为首页。看你路由的路径配置。
</router-view>
</div>
</template> <script>
import headerbao from "../components/header.vue" //引入头部组件。（重点）
export defalut{ //引入(重点) name:"App",
components:{ //注册组件
headerbao,
} data:function(){ return{ abc:123 } }, methods:{//to do someting} } </script> <style lang="scss"> </style>
其他组件同上即可。
3.4.views（文件）；
这里面等于页面文件，等于都会放进路由里面。
1.例如index.vue(首页)
<template>
<div id="index">
<headerbao></headerbao> //引入到标签
</div>
</template>
<script>
import headerbao from "../components/header.vue" //引入头部组件
export defalut{
name:"index",
data:function(){
return{//}
},
components:{ //注册组件
headerbao ,
}
}
</script>
<style lang="scss"> </style>
3.5.路由
1.打开my_project文件，cmd
npm install vue-router
2.成功以后，就创建目录（第一步有说基本目录）router/router.js
3.在main.js中
import router from "../router/router.js" new Vue({ el:"#App", router, //记得注册路由 .... })
4.打开router.js文件，记得一定要引入vue和路由库。
import Vue from "vue"; //一定要引入vue improt router from "vue-router"; //一定要引入路由库 import Index from "../views/index.vue"; import Newsfrom "../views/news.vue"; .... Vue.use(router) //使用路由 export defalut new router({ routes:[ //这个是router中的配置属性。 { path:"/", //当前默认路径 component:Index, //首页组件 name:"Index", //组件名 }， { path:"/news", //跳转路径 component:News, //新闻组件 name:"News", //组件名 }， ] })
3.6.css文件
1.可以直接引入到index.html
首先创建好scss文件目录，然后开启编译，scss --watch scss：css 然后再创建一个公共的common.scss，方便我调用方法。
（这样子做虽然方便，但是千万要注意命名冲突问题。毕竟一个页面可能会有很多组件。）
2.可以直接在组件下写。
