chrome vue插件_(建议收藏) | 企业中Vue.js最常用的第三方插件

1. Vue.js devtools

用于开发调试Vue.js的一个必备插件。可以在Chrome中的扩展程序中直接安装,也可以本地文件的方式安装。

1343496366458b8de7a02f36738de4e5.png

2. nprogress 页面顶部进度条

当路由切换事会在浏览器的顶部出现一个蓝色进度条用于表示路由切换的进度,并在又上角有个蓝色loading的动画。

一般情况下切换到目标路由时,在目标路由中的生命周期中可能会做一些处理(如请求接口等),这些操作会有一定的耗时,所以使用进度条来表示路由切换的进度。

CSDN在切换路由时就有这种效果。只不过CSDN的进度条是红色的,右上角没有loading。

GitHub: https://github.com/rstacruz/nprogress

1. 安装

 cnpm install --save nprogress

2. 在main.js中导入

import NProgress from 'nprogress'import 'nprogress/nprogress.css'// 配置NProgress选项// NProgress.configure({ })// 在路由页面跳转使用router.beforeEach((to, from, next) => { // 开始进度条 NProgress.start() // 继续路由 next()})router.afterEach(transition => { // 结束进度条 NProgress.done()})

3. HelloWorld.vue

Go to Foo

Foo.vue

Foo Vue
8cb780f6043c57b1354d7b882e6fd4ed.png

3. echarts

在vue中集成echarts可以通过两种方式集成:

  • echarts
  • vue-echarts
  • 注意:echarts和vue-echarts 不要同时使用。

官方示例:https://echarts.baidu.com/examples/

1 安装echarts依赖

cnpm install echarts -S

HelloWorld.vue

19ceec25cfc04031593014032655de53.png

4. vue-lazyload 图片懒加载

插件地址:https://github.com/hilongjw/vue-lazyload

demo:http://hilongjw.github.io/vue-lazyload/

2.1 安装 和 使用插件

cnpm install vue-lazyload --save

src/main.js 导入import并使用use插件

import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload)// 也可以配置一些选项, 建议使用这种配置方式,配置一些参数Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png', loading: 'dist/loading.gif', attempt: 1})

2.2 需要懒加载的图片绑定 v-bind:src 修改为 v-lazy

c36bd8f80016c3c65addc091bd46402e.png

5. 导出excel

1. 安装组件 file-saver、xlsx、xlsx-style、script-loader

cnpm install -S file-saver xlsx xlsx-stylecnpm install -D script-loader

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

1a26ee3b3467a8a4eb5906d8d11621ea.png

3. 在webpack.base.conf.js中配置别名

在alias中增加vendor别名

resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', 'vendor': path.resolve(__dirname, '../src/vendor'), '@': resolve('src'), }},
0f5b3e59b195729ced8739c5ad35fee1.png

4. 在组件中使用

导出
b9e2f68737e70a1d0fb99494494c20cc.png
8931db394af04e93dbf161451a827688.png

注意:

  • 可以通过 xlsx-style 来指定单元格的样式, 例如居中、单元格颜色等
  • 可以通过merges 属性来合并单元格,合并单元格时需要将数据平铺开来

6. 导入excel

导入只需要安装xlsx插件

npm install xlsx --saveExcelImportExample.vue
导入
{{excelData}}
71871d91ccfc8d17a25daaf0bb376d89.png
60a642902d1e94c6d5da7f56c2f2264d.png

7. moment.js

moment.js 日期处理类库。中文网站: http://momentjs.cn/

安装

cnpm install moment --save

在使用的组件中导入

{{ new Date() | dateFrm}}
5374fc8170d4ea49e157c6249643e409.png

注意:moment.js中的日期格式化与其它语言如(Java)中的格式不太一样。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值