依托 Vue.js 高效的組件化方案集灌，Mint UI 做到了輕量化攘滩。即使全部引入归榕，壓縮后的文件體積也僅有 ~30kb (JS + CSS) gzip法挨。
修改配置文件后必須要重新啟動npm run dev
一码泞、安裝Vue
Vue.js 提供一個(gè)官方命令行工具兄旬，可用于快速搭建大型單頁應(yīng)用。該工具提供開箱即用的構(gòu)建工具配置余寥，帶來現(xiàn)代化的前端開發(fā)流程辖试。
只需幾分鐘即可創(chuàng)建并啟動一個(gè)帶熱重載、保存時(shí)靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項(xiàng)目：
安裝全局vue-cli腳手架劈狐、webpack
命令輸入
npm install -g vue-cli? ?? ?? ?? ?? ?? ?? ???//全局安裝vue-cli
npm install -g webpack? ? ? ? ? ? ? ? ? ? ?//全局安裝webpack
npm install -g webpack-dev-server? ? //在項(xiàng)目中安裝webpack的本地webserver
npm install style-loader css-loader? //?安裝style-loader和css-loader用于解析css文件
npm install babel-core babel-loader? //安裝babel-core和babel-loader用于轉(zhuǎn)譯ES6代碼為瀏覽器可讀代碼
npm install vue vue-loader vue-router vue-template-compiler? //安裝vue和vue-router相關(guān)插件罐孝，由于最終代碼需要vue支持，所以安裝為最終依賴
npm -y init? ?//生成package.json文件
建議：全局安裝vue-cli肥缔、webpack莲兢，同時(shí)在項(xiàng)目中安裝webpack的本地webserver，在webpack最新版本4.25.1中要哦安裝webpack-cli
? ? ? ? ? ?判斷vue,webpack,node,npm安裝成功：vue -V ,node -v即可
二续膳、webpack創(chuàng)建一個(gè)新項(xiàng)目
1改艇、Vue init webpack project-name
由于node的版本是6.9.1會有一些警告，并不影響項(xiàng)目的運(yùn)行坟岔；安裝時(shí)網(wǎng)速如果較慢可能會卡住
2谒兄、npm install mint-ui –save
安裝mint-ui?
3、npm?install babel-plugin-component
按需引入的方法引入多個(gè)組件
配置.babelrc
mint-ui的使用文檔mint-ui documentation
需要引入 Mint UI ,這里有兩種情況:
1. 引入全部組件
如果項(xiàng)目會用到 Mint UI 里較多的組件社付，最簡單的方法就是把它們?nèi)恳氤衅！４藭r(shí)需要在入口文件 main.js 中：
????????????????import Mint from 'mint-ui';
????????????????Vue.use(Mint);
????????????????import 'mint-ui/lib/style.css';
2. 按需引入
如果你只需要使用某個(gè)組件邻耕，可以僅引入這個(gè)組件，Mint UI 能夠保證在代碼打包時(shí)燕鸽，與這個(gè)組件無關(guān)的文件不會出現(xiàn)在最終代碼里兄世。比如需要引入 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的地方寫上
<style lang="sass" scoped></style> 或者?<style lang="sass" scoped></style>
scoped:代表作用域在此模板下
四御滩、開發(fā)服接口調(diào)用
由于棄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 開啟跨域代理沟娱，保證開發(fā)服跨域成功以及正式服成功調(diào)取
4.3.1 在config的index.js中開啟跨域
4.3.2? 在config的dev.env.js中修改API氛驮，保證和index.js設(shè)置的一樣
4.3.3 修改main.js，進(jìn)行原型掛靠
4.3.4 在模板中調(diào)取的方法
先定義host
get,post的調(diào)取方式
4.3.5 修改config的index.js的host,換成本地的IP地址可以在手機(jī)上訪問本地
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中本地靜態(tài)圖片的路徑問題解決方案
css中的本地圖片路徑在打包后的問題
開發(fā)模式下css中用url（）引用圖片是正常的柳爽，但是打包后圖片路徑卻并沒有正確處理
解決辦法：修改build文件下utils.js
六媳握、胡說八道的注意點(diǎn)
6.1 .gitignore中不可以禁掉build碱屁，否則webpack打包有問題
6.2 上傳favicon.ico
6.3 安裝sass-loader時(shí) error：TypeError: this.getResolve is not a function，原因：版本過高引起的蛾找，解決方法：把項(xiàng)目package.json文件中sass-loader版本改為7.3.1娩脾。執(zhí)行命令，重新安裝項(xiàng)目依賴 npm i：
