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可以通过两种方式集成：
echartsvue-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>
注意：
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)中的格式不太一样。