1. Vue.js devtools
用於開發調試Vue.js的一個必備插件。可以在Chrome中的擴展程序中直接安裝，也可以本地文件的方式安裝。
2. nprogress 頁面頂部進度條
當路由切換事會在瀏覽器的頂部出現一個藍色進度條用於表示路由切換的進度，並在又上角有個藍色loading的動畫。
一般情況下切換到目標路由時，在目標路由中的生命週期中可能會做一些處理(如請求接口等)，這些操作會有一定的耗時，所以使用進度條來表示路由切換的進度。
CSDN在切換路由時就有這種效果。只不過CSDN的進度條是紅色的，右上角沒有loading。
GitHub: https://github.com/rstacruz/nprogress
1. 安裝
<code> cnpm install --save nprogress/<code>
2. 在main.js中導入
<code>import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 配置NProgress選項
// NProgress.configure({ })
// 在路由頁面跳轉使用
router.beforeEach((to, from, next) => {
// 開始進度條
NProgress.start()
// 繼續路由
next()
})
router.afterEach(transition => {
// 結束進度條
NProgress.done()
})/<code>3. HelloWorld.vue
<code>Go to Foo
/<code>
Foo.vue
<code>Foo Vue
/<code>
3. echarts
在vue中集成echarts可以通過兩種方式集成：
- echarts
- vue-echarts
- 注意：echarts和vue-echarts 不要同時使用。
官方示例：https://echarts.baidu.com/examples/
1 安裝echarts依賴
<code>cnpm install echarts -S/<code>
HelloWorld.vue
<code> /<code>
4. vue-lazyload 圖片懶加載
插件地址：https://github.com/hilongjw/vue-lazyload
demo：http://hilongjw.github.io/vue-lazyload/
2.1 安裝 和 使用插件
<code>cnpm install vue-lazyload --save/<code>
src/main.js 導入import並使用use插件
<code>import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// 也可以配置一些選項, 建議使用這種配置方式，配置一些參數
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})/<code>2.2 需要懶加載的圖片綁定 v-bind:src 修改為 v-lazy
<code>/<code>
5. 導出excel
1. 安裝組件 file-saver、xlsx、xlsx-style、script-loader
<code>cnpm install -S file-saver xlsx xlsx-style cnpm install -D>
2. 在src下創建vendor文件夾，並創建Blob.js和Export2Excel.js兩個文件
Blob.js 文件地址：https://github.com/eligrey/Blob.js
Export2Excel.js 文件內容請從這裡獲取https://blog.csdn.net/vbirdbest/article/details/86527886
3. 在webpack.base.conf.js中配置別名
在alias中增加vendor別名
<code>resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue#39;: 'vue/dist/vue.esm.js',
'vendor': path.resolve(__dirname, '../src/vendor'),
'@': resolve('src'),
}
},/<code>
4. 在組件中使用
<code>/<code>
注意：
- 可以通過 xlsx-style 來指定單元格的樣式, 例如居中、單元格顏色等
- 可以通過merges 屬性來合併單元格，合併單元格時需要將數據平鋪開來
6. 導入excel
導入只需要安裝xlsx插件
<code>npm install xlsx --save ExcelImportExample.vue 導入{{excelData}}
/<code>
7. moment.js
moment.js 日期處理類庫。中文網站： http://momentjs.cn/
安裝
<code>cnpm install moment --save/<code>
在使用的組件中導入
<code>{{ new Date() | dateFrm}}
/<code>
注意：moment.js中的日期格式化與其它語言如(Java)中的格式不太一樣。
