依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。
修改配置文件后必须要重新启动npm run dev
一、安装Vue
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。
只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
安装全局vue-cli脚手架、webpack
命令输入
npm install -g vue-cli //全局安装vue-cli
npm install -g webpack //全局安装webpack
npm install -g webpack-dev-server //在项目中安装webpack的本地webserver
npm install style-loader css-loader // 安装style-loader和css-loader用于解析css文件
npm install babel-core babel-loader //安装babel-core和babel-loader用于转译ES6代码为浏览器可读代码
npm install vue vue-loader vue-router vue-template-compiler //安装vue和vue-router相关插件，由于最终代码需要vue支持，所以安装为最终依赖
npm -y init //生成package.json文件
建议：全局安装vue-cli、webpack，同时在项目中安装webpack的本地webserver，在webpack最新版本4.25.1中要哦安装webpack-cli
判断vue,webpack,node,npm安装成功：vue -V ,node -v即可
二、webpack创建一个新项目
1、Vue init webpack project-name
由于node的版本是6.9.1会有一些警告，并不影响项目的运行；安装时网速如果较慢可能会卡住
2、npm install mint-ui –save
安装mint-ui
3、npm install babel-plugin-component
按需引入的方法引入多个组件
配置.babelrc
mint-ui的使用文档mint-ui documentation
需要引入 Mint UI ,这里有两种情况:
1. 引入全部组件
如果项目会用到 Mint UI 里较多的组件，最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中：
import Mint from 'mint-ui';
Vue.use(Mint);
import 'mint-ui/lib/style.css';
2. 按需引入
如果你只需要使用某个组件，可以仅引入这个组件，Mint UI 能够保证在代码打包时，与这个组件无关的文件不会出现在最终代码里。比如需要引入 Button 组件，则在 main.js 中：
import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';
Vue.component(Button.name, Button);
三、安装sass\scss
3.1 安装sass的依赖包
npm install --save-dev sass-loader //sass-loader依赖于node-sass
npm install --save-dev node-sass
3.2 在build文件夹下的webpack.base.conf.js的rules里面添加配置
3.3 需要用到sass的地方写上
或者
scoped:代表作用域在此模板下
四、开发服接口调用
由于弃vue-resource推axios，所以这边主要使用axios用法
4.1 安装axios
npm install axios --save-dev
4.2 改写原型链
在main.js中引如axios。由于在其他组件中无法使用axios命令，所以需要将axios改写为Vue的原型属性。
import axios from 'axios' //引入axios
Vue.prototype.$http=axios //修改Vue的原型属性
4.3 开启跨域代理，保证开发服跨域成功以及正式服成功调取
4.3.1 在config的index.js中开启跨域
4.3.2 在config的dev.env.js中修改API，保证和index.js设置的一样
4.3.3 修改main.js，进行原型挂靠
4.3.4 在模板中调取的方法
先定义host
get,post的调取方式
4.3.5 修改config的index.js的host,换成本地的IP地址可以在手机上访问本地
4.3.6 如何使用JQuery
安装npm install jquery --save-dev //-jquery一定要小写不然会提示 Please use 'jquery' (all lowercase)
在bulid文件夹下webpack.dev.conf.js添加
在bulid文件夹下webpack.prod.conf.js添加
入口文件main.js中输入
五、vue-cil和webpack中本地静态图片的路径问题解决方案
css中的本地图片路径在打包后的问题
开发模式下css中用url（）引用图片是正常的，但是打包后图片路径却并没有正确处理
解决办法：修改build文件下utils.js
六、胡说八道的注意点
6.1 .gitignore中不可以禁掉build，否则webpack打包有问题
6.2 上传favicon.ico
6.3 安装sass-loader时 error：TypeError: this.getResolve is not a function，原因：版本过高引起的，解决方法：把项目package.json文件中sass-loader版本改为7.3.1。执行命令，重新安装项目依赖 npm i：