1.優化
2.頁面效能優化
或元件懶載入
使用vue-lazyload元件或其他一些元件
// 引入一張// 引入一組② 元件懶載入
vue.use(vuelazyload, );3.預載入快速顯示
4.三方外掛程式懶載入（按需載入）
js檔案一般是同步載入的，放在頁面內會阻塞主要js檔案載入。
使用場景：有的專案必須引入jquery等檔案時，在元件內部引入這些檔案一定程度會阻塞頁面渲染，因而通過特定事件（點選或者彈窗）動態載入jquery等js檔案，可以使主頁面快速顯示出來。
非同步載入頁面，如何讓元件之間不重合
載入多個vue元件時，同時元件是通過服務端資料渲染時，會出現多個元件先重合後分離的狀況
三種方案：
① 當頁面展示的版塊是固定的時候且內容高度不易變動時候，可以預先在元件外設定乙個固定高度，顯示的時候就像在乙個框架裡新增內容。當頁面內容不固定時候，為了減少非同步載入時元件重合的問題，可以在首屏在某元件資料載入完成時候設定其他元件顯示，通過v-show顯示。
② 當頁面整體固定時，可以為頁面增加乙個骨架，這樣防止頁面閃爍的情況。
③ 服務端渲染頁面,對於一些頁面資料固定、更改較少的，可以考慮通過服務端渲染，會在短時間將頁面顯示出來，有比較好的使用者體驗。
5.減少引入外部檔案大小
專案引入部分elementui內容時，通過引入babel-plugin-component配置.babelrc檔案，這樣即可引入部分元件，從而減少元件的大小。
6.路由懶載入
但使用到vue-router時，webpack會將所有元件打包在乙個js檔案中，這樣就導致這個檔案非常大，從而會影響首頁的載入，最好的方法就是將其他路由分別打包到不同js檔案中，切換路由時再載入對應js檔案。
resolve => require([url], resolve), 支援性好7.路由頁面快取8.請求優化( ) => system.import(url) , webpack2官網上已經宣告將逐漸廢除, 不推薦使用
( ) => import(url), webpack2官網推薦使用, 屬於es7範疇, 需要配合babel的syntax-dynamic-import外掛程式使用
① 伺服器對快取
② 設定請求快取，設定cache-control
③ 開啟gzip,壓縮響應資訊，使傳輸快
④ 設定dns快取
⑤ 使用http2.0
在vue專案中mock的使用
模擬後台介面，提供頁面需要的資料。使用例子 使用 mock var mock require mockjs var data mock.mock 輸出結果 console.log json stringify data 資料模板中的每個屬性由3部分構成 name rule value 屬性名 生成規...
在 Vue 專案中使用 ECharts
重要檔案版本 在 vue 專案中使用 echarts 只需要在 vue 元件的mounted生命週期中 初始化 echarts，然後在每次配置項有變更時呼叫setoption 方法更新配置即可 專案模板原始碼 class default chart style div template import...
在vue專案中使用echarts
安裝echarts依賴 npm install echarts s 建立圖表 全域性引入 main.js 引入echarts import echarts from echarts vue.prototype.echarts echarts 這裡也可以在router下index.js引入，看規定 h...