1捣辆、安裝配置vue
前提是已經(jīng)安裝并配置好node和npm環(huán)境，先搭建vue腳手架 vue-cli
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 安裝依賴拙吉，走你
$ cd my-project? ? ? 切換到你創(chuàng)建的文件夾下
$ npm install? ? ? ?安裝依賴
$ npm run dev? ? ?開始你的項(xiàng)目
$ npm run build? ? 編譯打包你的項(xiàng)目
補(bǔ)充：打包好的文件夾dist中的index需在服務(wù)環(huán)境中打開，報(bào)以下錯誤時(shí)
檢查一下css的引入路徑距贷，修改一下就好了
2党涕、安裝iview
可以打開iview的官網(wǎng)：iview官網(wǎng) ?查看指南放典，都比較詳細(xì)
我選擇的是用npm安裝
$ npm install iview --save
3逝变、引入iview
一般在 webpack 入口文件 main.js?中如下配置：
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import iView from 'iview';? ? ? ? ? ? ? ? ? ? //引入iview
import 'iview/dist/styles/iview.css';? ? ? ? //引入iview的css樣式文件，后面如果需要自己配置也可以新建文件進(jìn)行修改
Vue.use(VueRouter);
Vue.use(iView);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //use使用這個插件
// The routing configurationconst RouterConfig = { routes: Routers};
const router = new VueRouter(RouterConfig);
new Vue({ el: '#app', router: router, render: h => h(App)});
如果覺得iview整個配置太大奋构，也可以按需引用
借助插件?babel-plugin-import可以實(shí)現(xiàn)按需加載組件壳影，減少文件體積。首先安裝弥臼，并在文件?.babelrc?中配置：
npm install babel-plugin-import --save-dev
// .babelrc
{ "plugins": [["import", { "libraryName": "iview", "libraryDirectory": "src/components" }]]}
然后這樣在需要使用的頁面中按需引入組件宴咧，就可以減小體積了：
import { Button, Table } from 'iview';?
Vue.component('Button', Button);?
Vue.component('Table', Table);
注：css文件還是要在main.js中引用的
5、引用后續(xù)出現(xiàn)的問題
6径缅、接口調(diào)用post請求報(bào)錯
運(yùn)用post請求數(shù)據(jù)時(shí)掺栅，參數(shù)無法傳遞到后臺
解決：加上emulateJSON:true
7烙肺、后臺處理登錄，前臺傳參附加參數(shù)
{withCredentials: true}? ? ? //一般jQuery和js中的寫法
或者 {credentials: true}? ? ?//vue中的寫法
注意：添加的credentials: true需要與params并列氧卧，不能放錯了位置Ｌ殷稀！沙绝！
8搏明、項(xiàng)目中用到的一些方法
獲取當(dāng)前頁面的url
獲取完整url可以用?window.location.href
獲取路由路徑可以用?this.$route.path
獲取路由路徑參數(shù)?this.$route.params
9、iview中分頁的使用
10闪檬、監(jiān)聽路由變化
注意watch方法
11星著、ico圖標(biāo)的添加
? ? 11.1、直接將favico.ico丟到根目錄(就是src同級的目錄)粗悯，然后在build/webpack.dev.conf.js文件中配置
在webpack.dev.conf.js文件中的plugins里加入這段代碼（我的這個沒有生效虚循，用的是第二種方法）
? ? 11.2、把favicon放入static文件夾下
12样傍、打包出來dist文件夾中的index.html直接打開顯示空白
找到配置文件config/index.js,修改以下位置
13邮丰、打包出來的樣式中的背景圖片樣式問題
找到build/utils.js文件
修改成為如下所示內(nèi)容：
14、打包后铭乾，引用的iview中的icon圖標(biāo)不顯示剪廉，并且路徑重復(fù)
在 build/webpack.prod.conf.js 中,將里邊的 extract改為false,默認(rèn)是true
15、將localhost換成本地ip
修改config文件夾下面的index.js配置炕檩，將localhost改為0.0.0.0就可以了斗蒋。用ip，127.0.0.1笛质，localhost均行
16泉沾、打包后首頁加載很慢，優(yōu)化首頁加載速度的方法
16.1妇押、路由懶加載
16.2跷究、gzip壓縮
config/index.js中的build下的productionGzip: true,不過需要提前安裝插件
npm install --save-dev compression-webpack-plugin
16.3、第三方庫選擇cdn的方式引入
在index.html的文件中直接引入敲霍，在main.js和router/index.js中用import方式引入的就可以去掉了俊马，
17、登錄時(shí)肩杈，綁定enter鍵
在最后一個input上綁定（有多個input的情況也可以在多個input上綁定）
18柴我、路由回退上一級
有些詳情頁展示內(nèi)容一樣時(shí)，就會共用一個組件扩然，但是頭部導(dǎo)航就不能固定艘儒，因此可以使用vue的路由回退的功能
備注：如果頁面是分享出去，需要判斷是否有上一級
在頁面一開始加上一個全局的函數(shù)：
activated:function(){
????this.$setgoindex()
}
這個函數(shù)是這樣的，判斷當(dāng)前頁面的歷史記錄是不是小于等于1界睁，如果小于等于1觉增，說明這個頁面沒有可以返回的上一頁，如果沒有可以返回的上一頁翻斟，就給地址欄加上一個goindex=true的參數(shù)抑片，這樣你從這個頁面在往下一個頁面跳轉(zhuǎn)在返回，這個參數(shù)就一直加上的
Vue.prototype.$setgoindex =function(){
????if(window.history.length <=1) {
????????if(location.href.indexOf('?') ===-1) {
????????????window.location.href = location.href +'?goindex=true'
????????}elseif(location.href.indexOf('?') !==-1&& location.href.indexOf('goindex') ===-1) {
????????????window.location.href = location.href +'&goindex=true'
????????}?
????}
}
然后在左上角返回按鈕加上這個邏輯：
if(this.$route.query.goindex ==='true') {
????this.$router.push('/')
}else{
????this.$router.back(-1)
}
這樣就可以了
19杨赤、打包時(shí)報(bào)錯
將iview改為按需加載后敞斋，打包時(shí)報(bào)以下錯：
按錯誤提示，屬于iview中的src中有文件未編譯出來疾牲，因此修改webpack.config.js】配置文件植捎，找到?/\.js$/的rules，進(jìn)行修改
上圖中便是添加的內(nèi)容阳柔，再運(yùn)行npm run build就好了
20焰枢、項(xiàng)目完成后打包文件太大
打包后的js文件太大，直接上圖
解決方法（只能一點(diǎn)點(diǎn)的去減猩嗉痢）如下：
1济锄、gzip
找到config下的index.js中的build：{ productionGzip:true }，默認(rèn)為false
2霍转、路由懶加載
3荐绝、ui插件庫iview按需引入
21、iview的按需引入報(bào)錯
在查看view/src/components文件夾時(shí)避消，發(fā)現(xiàn)radio-group文件是存在的低滩，但是使用就是會報(bào)錯，如下圖
最后查看官方文檔是要配置.babelrc岩喷，官方文檔給的是
但是我的.babelrc文件已經(jīng)按上面的配置了恕沫，最后我去查看另一個未報(bào)錯項(xiàng)目的.babelrc文件，發(fā)現(xiàn)多了一些東西纱意，加上后發(fā)現(xiàn)問題解決了婶溯，不知道問題解決的原理，先貼上代碼偷霉，后面再研究
加上的做了標(biāo)記迄委，后面再研究，先趕緊完成今天的任務(wù)要緊腾它。
22跑筝、axios請求數(shù)據(jù)
vue2.0之后不再維護(hù)vue-resource,并且服務(wù)端渲染也不支持vue-resource死讹，然后中途迅速換掉了瞒滴，所以說開發(fā)項(xiàng)目前一定要多想想，開發(fā)項(xiàng)目前一定要多想想，開發(fā)項(xiàng)目前一定要多想想妓忍，重要的事情說三遍Ｂ擦健！世剖！
言歸正傳定罢，首先需要安裝依賴
npm install axios --save-dev
然后建一個fetch.js的配置文件，在里面引入axios旁瘫，并定義一些參數(shù)
接下來可以新建一個js文件祖凫，用來放需要用到的數(shù)據(jù)請求的方法
然后在頁面中有需要用到以上方法的，就可以將該法法引入一下酬凳，就可以使用了惠况，其中data是需要傳入的參數(shù)。
需要說明一下的是宁仔，axios請求數(shù)據(jù)稠屠，雖然加上了emulateJSON：true;后臺有可能還是接收不到參數(shù)，這就需要轉(zhuǎn)換一下傳參的格式翎苫，一般是使用qs這個插件來進(jìn)行處理权埠，同樣是首先需要安裝
npm install qs --save-dev
考慮到大部分頁面可能都需要用到，所以可以在main.js中全局引用（這個可以根據(jù)需求來）
接下來就是在data需要處理的地方進(jìn)行轉(zhuǎn)換煎谍，
