记录一些好用的vue插件

  以前做的项目没怎么用到,不过换了家公司,看到其他的项目里有用到一些自己平时不知道的插件,苦于记忆不好,于是将这些杂七杂八的插件记录下来。

  1.vue-count-to 数据滚动插件

  这个插件是实现数据从一个数字增长为另一个数字时的动态效果,如一个汇总的页面,数据从0到某个具体数字。

使用也很简单,npm安装之后,在要用到的页面引入,import CountTo from ‘vue-count-to‘

<count-to class="card-panel-num" :startVal="0" :endVal="899" :duration="1000"></count-to>

具体的参数可以看官网https://www.npmjs.com/package/vue-count-to

  2.nprogress 顶部进度条

  实现跳转页面时顶部的进度条,效果如下图

一般是在页面跳转的时候使用

详情地址:https://github.com/rstacruz/nprogress

  3.simplemde 富文本编辑器插件

简单好用的富文本编辑器。使用方式如下:

引入:

初始化:

html标签:

离开页面时清空:

  4.sortablejs 实现拖拽复制列表项

  具体看http://www.sortablejs.com/文档

  5.vue-i18n vue国际化插件

  详情地址:http://kazupon.github.io/vue-i18n/installation.html#dev-build

  6.vue-splitpane vue分割窗格

  详情地址:https://npm.taobao.org/package/vue-splitpane

武汉疫情这么严重,实在写不下去了,祝愿大家都平安!

原文地址:https://www.cnblogs.com/liuqin-always/p/12228125.html

时间: 2024-10-07 07:39:54

记录一些好用的vue插件的相关文章

vue 插件

UI组件 element ★9305 - 饿了么出品的Vue2的web UI工具套件 Vux ★6802 - 基于Vue和WeUI的组件库 mint-ui ★4776 - Vue 2的移动UI元素 iview ★4458 - 基于 Vuejs 的开源 UI 组件库 Keen-UI ★2363 - 轻量级的基本UI组件合集 vue-material ★2207 - 通过Vue Material和Vue 2建立精美的app应用 muse-ui ★1992 - 三端样式一致的响应式 UI 库 vuet

基于axios的vue插件,让http请求更简单

ajax-plus 基于axios 的 Vue 插件 如何使用 npm 模块引入 首先通过 npm 安装 ```npm install --save ajax-plus or yarn add ajax-plus -S <p>然后在入口文件引入并配置:</p> <p>对标axios的配置,详见<a href="https://www.npmjs.com/package/axios" rel="nofollow noreferrer&q

从零开始编写一个vue插件

title: 从零开始编写一个vue插件 toc: true date: 2018-12-17 10:54:29 categories: Web tags: vue mathjax 写毕设的时候需要一个mathjax编辑器,因此直接写一个插件试一下. 准备账号 进入npm注册账号 初始化项目 vue init webpack-simple mathjax-toolbar cd mathjax-toolbar npm install 得到的项目内的/src结构如下: src/ ├── assets

Chrome 浏览器安装Vue插件方法 (十分详细)

博主最近在研究Vue,无奈新手想安装Chrome的Vue插件,整理下安装流程: 1.首先去github下载vue.zip文件插件(还有npm安装方法这里就不介绍了自行百度) 2.下载后解压 3.然后通过npm下载相关依赖,可能有些同学没有安装npm,博主也是,这里介绍下安装npm的方法. 从node.js中文网站下载node.js,里面包含npm 4.下载完成直接安装,因为博主已安装成功就不截图,验证npm是否安装成功命令,打开CMD输入 node -v npm -v 如果出现对应版本号,说明安

安装浏览器的vue插件

安装浏览器的vue插件步骤: 1.在浏览器中打开 https://github.com/vuejs/vue-devtools Clone or download  vue-devtools. 2.解压vue-devtools-dev文件,并在编辑器中打开vue-devtools-dev项目. 3.npm install 安装对应所需要的插件. 4.npm run build 打包当前的项目. 5.打开Chrome扩展程序页面. 6.打开开发者模式. 7.单击“加载已解压的扩展程序”,然后选择sh

vue idea vue插件(转)

因为工作需要,使用到vue.js 但是没有,原来的编辑器没的反应 所以, 就考虑下,怎么安装插件. 如图: 然后,要安装啥,自己搜索了. 比eclipse上的速度快呀有木有. 额,记得重启下ide.然后就可以了吧.

使用vue-cli编写vue插件

利用vue组件创建模板,使用webpack打包生成插件再全局使用 1.vue init webpack-simple 生成项目目录 2.调整目录结构 3.修改webpack.config.js var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, './dist')

vue -- 插件的开发与使用

开发插件 插件通常会为 Vue 添加全局功能.插件的范围没有限制--一般有下面几种: 1.添加全局方法或者属性,如: vue-custom-element. 2.添加全局资源:指令/过滤器/过渡等,如 vue-touch. 3.通过全局 mixin 方法添加一些组件选项,如: vue-router. 4.添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现. 5.一个库,提供自己的 API,同时提供上面提到的一个或多个功能,如 vue-router. Vue.js 的插件

vue插件移动框

npm i dragablemodel -S(安装插件) import dragablemodel from 'dragablemodel' Vue.use(loading) 模板(组件) <dragablemodel v-model='modal5'> <span slot="top"></span> <div slot="main"> </div> </dragablemodel> 原文地址