1.安装vue-cli
① 使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack webpack-cli -g
② 全局安装vue-cli，在cmd中输入命令: npm install --global vue-cl
2.用vue-cli来构建项目
① 在工作目录下进入npm 输入一下命令创建一个vue项目：
vue init webpack vue-cli
跳出的选择可以一路yes下去。 需要注意的是创建文件用小写与 — 来拼接。（阮一峰-项目名为什么要用小写命名）
如果运行时eslint报错。 可以选择在build/webpack.base.conf.js里的eslint功能关闭
module: {
rules: [
// ...(config.dev.useEslint ? [createLintingRule()] : []),
]
}② 配置完成后，可以看到目录下多出了一个项目文件夹然后cd进入这个文件夹：
安装依赖：
npm install
( 如果安装速度太慢。可以安装淘宝镜像，打开命令行工具，输入：
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后使用cnpm来安装 )
3.启动项目
npm run dev如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config里的index.js
还有，如果本地调试项目时，建议将build 里的assetsPublicPath的路径前缀修改为 ' ./ '（开始是 ' / '），因为打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。（路径尽量使用相对路径而不要用绝对路径！！！）
注意：在进行vue页面调试时，可以下载个vue-tool扩展程序。
4.vue-cli的webpack配置分析
- 从
package.json可以看到开发和生产环境的入口。
- 可以看到dev中的设置，build/webpack.dev.conf.js，该文件是开发环境中webpack的配置入口。
- 在webpack.dev.conf.js中出现webpack.base.conf.js，这个文件是开发环境和生产环境，甚至测试环境，这些环境的公共webpack配置。可以说，这个文件相当重要。
- 还有config/index.js 、build/utils.js 、build/build.js等，具体请看这篇介绍：
https://segmentfault.com/a/1190000008644830
5.打包上线
注意，自己的项目文件都需要放到 src 文件夹下。
在项目开发完成之后，可以输入 npm run build 来进行打包工作。
npm run build
打包完成后，会生成 dist 文件夹（生成的路径可以在config/index.js里改）。
项目上线时，只需要将 dist 文件夹放到服务器就行了。
Tips:
1.router 里导入vue组件 推荐使用以下这种方法导入
component: resolve => require(['../pages/home.vue'], resolve)如果用import引入的话，当项目打包时路由里的所有component都会打包在一个js中，造成进入首页时，需要加载的内容过多，时间相对比较长。
当你用require这种方式引入的时候，会将你的component分别打包成不同的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js。
2.引用路径
@开头的路径。是在webpack.base.conf.js 中配置的。一般默认为src文件夹。
使用路径推荐用相对路径而不是/开头的绝对路径。
3. 引用scss
Vue文件中 scoped表明此样式表只作用于本页面。 lang="scss"表面用scss编写样式表
<style scoped lang="scss">
*{
margin: 0;
padding: 0;
}
</style>安装依赖即可dev下看到效果
npm install --save-dev node-sass
npm install --save-dev sass-loader
在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}4. 背景图build后路径不对
打开build/utils.js，在图中相应位置加入红框内容，其中值可能会有不同，若不同，自己配置成相应的即可
