超级详细的vue-cli+webpack搭建项目
1.安装vue-cli以及webpack
1)安装vue-cli
npm install vue-cli -g
2)安装webpack
npm install webpack -g
3)新建一个项目文件夹，如我的是(test)
4)在新建文件夹的上一级文件夹打开命令行，输入
vue init webpack test
5)以下是脚手架安装过程，项目名称就是我们之前取得test,项目路由一般选择安装，其他可以不安装。
6）进入test文件夹，执行以下命令
cnpm install
npm run dev
默认端口号是 http://localhost:8080
至此，脚手架搭建完成
2.创建一个新组件插入
假设我们想插入一个”footer”组件
1）在App.vue组件写以下代码
2）footer组件代码如下，header同理
3）查看效果
创建新的组建后，整体样式太丑了，所以配置了scss写样式，
3.scss配置三步搞定：
1)控制台安装它俩
npm install node-sass --save-dev
npm install sass-loader --save-dev
2）打开webpack.base.config.js在loaders里面加上
“`
{
test: /.scss$/,
loaders: [“style”, “css”, “sass”]
}
3)在样式部分写上
然后，就可以愉快的使用scss了。
4.使用路由
1).假设在header组件中有几个链接，每个链接跳向不同的路由。如图，两个路由分别是home和back
2).在index.js中写以下代码
3）看一下这两个组件（home红色背景，back绿色背景）
4）结果
至此，静态页面需要用到的东西基本完成，接下来我们想看一下vue的核心功能即数据操作。
5.数据操作（组件之间传值）
1）父组件向子组件传值
假设从App.vue（父组件）向header.vue（子组件）传值
父组件在子组件那里绑定一个值
子组件通过props接受传来的值
2）子组件向父组件传值
首先，子组件在data里面定义一个要返回的值，本例中，返回headerValue
然后，通过showHeaderValue方法返回，在button按钮绑定showHeaderValue方法，然后通过this.$emit返回，其中，第一个参数是父组件里面绑定的要接收的返回值的方法(header-tell-app)，第二个参数是要返回的值。
可以看到，父组件在v-header组件那里绑定了接收函数v-on:header-tell-app=”listen”。然后调用listen方法，其中listen中的参数就是子组件返回的数值，即刚才子组件中 this.$emit(‘header-tell-app’,this.headerValue)的第二个参数。
3)子组件向子组件传值（vuex）
首先安装vuex npm install --save vuex