精华内容
下载资源
问答
  • vue插件

    2019-01-08 17:08:56
    vue插件
  • idea vue插件

    2018-04-12 10:17:41
    由于idea下载vue经常会因为超时而下载不成功,故从idea官网下载2018.04.08版本的vue插件,解压到idea安装目录下plugins重启idea既可使用
  • 什么是vue插件vue插件怎么使用?

    千次阅读 2020-01-15 14:28:52
    一、什么是vue插件 官方解释 插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般下面几种: 添加全局方法或者属性。如: vue-custom-element 添加全局资源:指令/过滤器/过渡等。如 vue-...

    一、什么是vue插件

    官方解释

    插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:

    1. 添加全局方法或者属性。如: vue-custom-element

    2. 添加全局资源:指令/过滤器/过渡等。如 vue-touch

    3. 通过全局混入来添加一些组件选项。如 vue-router

    4. 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。

    5. 一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router

    二、插件的使用方法

    通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成:

          // 调用 `MyPlugin.install(Vue)`
        Vue.use(MyPlugin)
    
        new Vue({
          // ...组件选项
        })
    

    为防止 多次注册同一个插件: 我们可以传递一个可选的对象

            Vue.use(MyPlugin, { someOption: true })
    

    Vue.use 会自动阻止多次注册相同插件,届时即使多次调用也只会注册一次该插件。

    注意点 :

    Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。然而在像 CommonJS 这样的模块环境中,你应该始终显式地调用 Vue.use():

      // 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
    var Vue = require('vue')
    var VueRouter = require('vue-router')
    
    // 不要忘了调用此方法
    Vue.use(VueRouter)
    
    展开全文
  • Vue插件之公共方法封装 官方教程: MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 V...

    Vue插件之公共方法封装

    1. 官方教程:

          MyPlugin.install = function (Vue, options) {
              // 1. 添加全局方法或属性
              Vue.myGlobalMethod = function () {
                  // 逻辑...
              }
      
              // 2. 添加全局资源
              Vue.directive('my-directive', {
                  bind (el, binding, vnode, oldVnode) {
                  // 逻辑...
                  }
                  // ...
              })
      
              // 3. 注入组件
              Vue.mixin({
                  created: function () {
                  // 逻辑...
                  }
                  // ...
              })
      
              // 4. 添加实例方法
              Vue.prototype.$myMethod = function (methodOptions) {
                  // 逻辑...
              }
          }
    2. 初学时,看着有点懵,不知道从哪儿下手,那就一个一个来试试咯

          // 创建一个插件文件 test.js
          let test = {}
          test.install = function (Vue, options) {
              Vue.prototype.$msg = 'Hello I am test.js'
          }
          export default test
      
          // 在main.js中添加
          import test from './test'
          Vue.use(test)
      
          // 去其他地方测试下 例如 app.vue
          created () {
              console.log('现在的api: ', this.$msg)      // 初始化项目时,会打印 Hello I am test.js
          },
      
          // 第一步尝试成功
    3. 添加一些方法

          // test.js
          Vue.prototype.$netErr = (tag, err) => {
              console.log(`Error find in interface ${tag}: ${err}`)
              Message('请求数据失败,请稍后重试!')
          }

    That`s all,vue的纯js插件就是这么产生的,希望可以帮到小伙伴们~~,敬请期待下期的vue注入组价的开发方法

    展开全文
  • vue 插件集合

    万次阅读 多人点赞 2017-10-11 19:01:18
    Vue2.0+组件库总结   鲁大师666 关注 2017.05.05 10:46 字数 3121 阅读 5583评论 1喜欢 28 UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint...

    Vue2.0+组件库总结

    96 
    鲁大师666 
    2017.05.05 10:46  字数 3121  阅读 5583 评论 1

    UI组件

    开发框架

    实用库

    服务端


    • nuxt.js - 用于服务器渲染Vue app的最小化框架
    • express-vue - 简单的使用服务器端渲染vue.js
    • vue-ssr - 非常简单的VueJS服务器端渲染模板
    • vue-ssr - 结合Express使用Vue2服务端渲染
    • vue-easy-renderer - Nodejs服务端渲染

    辅助工具

    应用实例

    Demo示例

    展开全文
  • Vue 插件开发与发布

    千次阅读 2018-01-20 17:54:19
    主要讲解的是如何快速开发一个vue插件并发布到npm上 源码地址 所有代码都可以在我的GitHub vue-pay-keyboard 上查看, demo演示地址 请用手机或者电脑仿真查看 vuepayboard 关于vue插件 插件一般都如下...
    原文链接: www.jianshu.com

    本次演示的是开发一个 vue手机虚拟支付键盘插件
    主要讲解的是如何快速开发一个vue插件并发布到npm上

    源码地址

    所有代码都可以在我的GitHub vue-pay-keyboard 上查看,

    demo演示地址

    请用手机或者电脑仿真查看 vuepayboard

    关于vue插件


    插件一般都有如下几种形式导入

    ES6
    import vuePayKeyboard from 'vue-pay-keyboard'
    
    //  通过require 导入
    var vuePayKeyboard = require('vuePayKeyboard')
    
    // 通过use挂载
    Vue.use(vuePayKeyboard)
    
    // 或者直接导入js文件
    <script src="./dist/vue-pay-keyboard.js"></script>
    

    无论是那种方式,都可以非常方便的在我们的项目当中使用,那么vue的插件应该如何写并发布到npm上供大家使用呢 其实非常的简单.

    vue插件的规范


    vue官网有给出明确的文档 vue插件开发 ,我们需要有一个公开方法 install,里面来包含我们要处理的业务。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:

    // plug.js 
    const plug = {  //  定义一个对象
        install (Vue, options) {  // 需要拥有一个 install 方法
        }
    }
    // 导出这个对象
    export default plug
    

    那么此时我们就可以通过 use的方式来使用

    import plug from  'plug'
    Vue.use(plug)
    

    此时plup暴露给我们的 就是 install 函数定义的方法及属性

    废话不多说,直接开始我们的插件开发,本次将直接使用vue简化版脚手架.至于为什么不从0开始搭建webpack,原因大致是因为网上太多诸如此类的博客了,就没必要再嚼别人的口香糖了,其次为了照顾那些不懂 webpack 配置的童鞋们以及达到快速开发的目的.

    初始化项目

    vue init webpack-simple vue-pay-keyboard
    

    一切都基于这个脚手架来改造,只需要稍微改动就可以变成我们的东西,当然其中重要的配置 会相对应的解释

    这里我选择了使用sass 因为后面我会用到 大家可以自行选择

    初始化项目
    初始化项目

    OK 一切先用默认的,等会我们再改, 启动项目之后,我们把自带的多余的东西全删掉,然后在src下面新建一个 lib文件 用于存放我们的源码
    并新建 index.js 用于作为我们的插件入口
    新建一个 vue-pay-keyboard.vue 存放我们的开发的组件
    至此 文件目录如下:

    .
    ├── src                            // 源码目录
    │   ├── lib                        // 源码
    │   │   ├── index.js               // 插件入口
    │   │   ├── vue-pay-keyboard.vue   // 组件
    │   ├── App.vue                    // 页面入口文件
    │   ├── main.js                    // 程序入口文件,加载各种公共组件
    ├── index.html                     // 入口html文件
    .
    

    非常简洁,然后开始写我们的index.js 我们需要导入.vue组件,并按照vue插件规范开发并且导出,这里我们用全局组件的方式作为插件,其他类型的插件调用方式也都大同小异

    import vuePayKeyboard from './vue-pay-keyboard.vue' // 导入组件
    const paykeyboard = {
        install (Vue, options) {
            Vue.component(vuePayKeyboard.name, vuePayKeyboard)  // vuePayKeyboard.name 组件的name属性
           // 类似通过 this.$xxx 方式调用插件的 其实只是挂载到原型上而已
           // Vue.prototype.$xxx  // 最终可以在任何地方通过 this.$xxx 调用
           // 虽然没有明确规定用$开头  但是大家都默认遵守这个规定
        }
    }
    export default paykeyboard // 导出..
    

    ok 可以说基本的开发环境我们已经搭建完成了...你们信吗? 接下来我们写键盘的业务逻辑 会相对复杂,这里根于不同的业务需求,会有不同的解决方案,但是有些东西都是相通的.

    如何写好一个组件


    我认为通常一个好的插件 首要的是解决用户的问题,其次在有必要的情况下再进行个别案例的解决,通常需要如下:

    • 通用性 // 能够满足大部分用户需求
    • 可订制性 // 能够满足用户针对不同业务环境进行订制
    • 可扩展性 // 能够满足用户对其他方面的拓展

    我们先简单的写下样式 我尽量写的像支付宝的样式哈。。。 同时对外开放几个属性和方法

    可传属性

    PropertyDescriptiontypedefault
    highlightColor点击时高亮的颜色String#000
    pasDigits密码的位数Number6
    isPay是否显示支付键盘Booleanfalse
    payTitle支付标题String请输入支付密码

    事件

    Function NameDescription
    pasEnd密码输入完毕
    close关闭键盘

    好了 我们的静态页面大致完成了, 输完6位号码自动验证 进行下一步动作

    这里移动端的1px用了我之前写的一个十分简单的class,至于其他逻辑可看源码,由于时间紧迫,代码方面我们往后再说,至此 我们基本完成开发 开始效果调试

    在app.vue中写一个简单的按钮用于唤起支付键盘
    并且在main.js中导入vuePayKeyboard 插件
    我们先暂时这么写 因为还未发布到npm

    import vuePayKeyboard from './lib/index.js'
    Vue.use(vuePayKeyboard)
    

    在app.vue中注册事件并使用插件

    <button @click="payShow()">点击支付</button>
    // 直接使用
    <vue-pay-keyboard :isPay='isPay' @pasEnd='pasEnd' @close='isPay=false'></vue-pay-keyboard>
    

    可以看到演示效果如下:


    demo.gif
    demo.gif

    呼 ~ 至此 我们所有开发都完成了 前面都是大家熟悉的 现在进入打包以及发布 也都是几分钟的事情. 修改 weppack.config.js 部分配置

    module.exports = {
     // entry: './src/main.js',  // 项目入口 我们通过npm run dev 就是从这里进去的 我们通过run build 打包编译也是
      // 因为我们要打包的插件在lib里面 所以稍稍改一下
       entry: './src/lib/index.js', // 注释掉原有的
      output: {
        path: path.resolve(__dirname, './dist'), 
        publicPath: '/dist/',
       // filename: 'build.js' // 打包后输出的文件名
        filename: 'vue-pay-keyboard.js' // 我们可不想打包后叫build.js 多low啊 起一个与项目相对应的
        library: 'PayKeyboard', // library指定的就是你使用require时的模块名,这里便是require("PayKeyboard")
        libraryTarget: 'umd', //libraryTarget会生成不同umd的代码,可以只是commonjs标准的,也可以是指amd标准的,也可以只是通过script标签引入的。
        umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
      },
    

    ok 通过 npm run build 打包一次
    此时可以看到生成了一个dist文件里面并且有两个文件 一个vue-pay-keyboard.js与一个map文件
    我们已经打包完成 先在index.html试一试是否可以通过直接导入script标签的方式使用
    此时我们需要先把index.html里面默认导入build.js文件改成我们打包之后的文件名称 并且需要导入vue
    此时并没有我们想象的那么顺利 报错了..

    image.png
    image.png

    报错的原因是我们并没注入vue-pay-keyboard 因为直接用标签的方式 我们并不可能使用use

    修改index.js文件

    ...
    // 新增
    if (typeof window !== 'undefined' && window.Vue) {
        window.Vue.use(paykeyboard);
    }
    ...
    

    再次打包 可以看到已经成功了 最后发布npm 最重要的是我们需要先修改package.json文件

    private:false, // 默认是true 私人的 需要改为false 不然发不上去 你可以试试..
    "license": "MIT", // 许可证
     "main": "dist/vue-pay-keyboard.js", // 这个超级重要 决定了你 import xxx from “vue-pay-keyboard” 它默认就会去找 dist下的vue-pay-keyboard 文件
      "repository": {
        "type": "git",
        "url": "https://github.com/yucccc/vue-pay-keyboard"
      }, // 配置这个地址存放你项目在github上的位置 也尤为重要
    

    OK 一切搞定 发布npm吧 哦 记得写一下readme 注册好npm后 添加用户

    npm adduser 
    Username: your name
    Password: your password
    Email: yourmail[@gmail](/user/gmail).com
    

    因为我这边已经添加过了 没办法演示 接着

    npm whoami // 看一看你是谁.. 
    

    没问题

    npm login // 登陆 
    npm publish // 发布
    
    image.png
    image.png  

    报了一个错,说了这么久 我自己却忘了把私人改为 false.

    image.png
    image.png  

    OK 我们发布成功.试一试能不能下载并且引用先.(有时候可能会存在延时或者缓存)
    然后再尝试通过 npm 下载来看看否使用吧 ~~
    我们通过安装依赖

    npm install vue-pay-keyboard -S 
    

    正常导入之后可能会发现找不到vue-pay-keyboard 这个模块.
    原因是我们的忽略文件默认忽略了 dist 文件
    修改 .gitignore 去掉忽略dist
    这里注意 每次上到npm上需要更改版本号,不然也会错误

    总结:

    vue插件的大致思路其实都是这样.
    你也赶快来开发属于你的第一个vue插件吧.
    如果觉得对你有帮助 希望能给我一个小小的start vue-pay-keyboard
    如有错误与纰漏,十分感谢您的指出
    至于插件的更加可用性,后期有时间会修改.
    感谢您看到最后!

    展开全文
  • 1.需求 ...目前我的一个需求是给网站添加gtm,我使用了vue的第三方插件,同时我想将该插件再封装成自己的nuxt插件插件中写各种业务逻辑,那么就遇到了,怎么再自己的nuxt插件中使用刚刚的vue...
  • vue插件大全汇总

    千次阅读 2019-06-12 21:04:46
    Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作和学习。很全的vue插件汇总,赶紧收藏下吧! 一、UI组件及框架 element -...
  • github下载: https://github.com/vuejs/vue-devtools ...执行npm install 或者淘宝版的执行 cnpm install 然后执行 npm build 然后到工程目录下的shell/chrome/manifest.json中修改: "persistent": true ...
  • Vue学习之Vue插件编写

    千次阅读 2018-01-31 23:40:20
    虽然,相比于React、angular、Knockout等框架,Vue.js起步较晚,但是,它集成了大量其他...如何在Vue.js框架中引入这些非Vue库或插件呢?笔者认为主要以下两种方式:  第一种,利用Vue提供的生命周期钩子函数,在不
  • IDEA上面安装vue插件

    万次阅读 2018-08-28 08:32:53
    IDEA上面安装vue插件 2018年08月01日 09:30:30 阅读数:103更多 个人分类: IDEA IDEA上面安装vue插件,并极速搭建vue后台管理模板 1.idea上面安装vue插件       (到这里idea安装vue插件就好...
  • vue插件整合

    千次阅读 2018-06-18 16:09:38
    转摘自点击打开链接UI组件element - 饿了么出品的Vue2的web UI工具套件Vux - 基于Vue和WeUI的组件库mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-...
  • electron-vue 插件管理

    千次阅读 2019-07-26 10:48:13
    样式插件 element-ui 多窗口、动画、模糊窗口插件 electron-vue-windows 代码编辑器插件 codemirror
  • vue插件

    千次阅读 2016-11-15 19:56:57
    1、vue-awesome-swiper 轮播 引入 import { swiper, swiperSlide } from ‘vue-awesome-swiper’ 遇到的一个问题是当自己手动拨了一下,然后就不自动播放了,这里要写一个参数autoplayDisableOnInteraction : ...
  • 安装webstorm vue插件

    万次阅读 2017-10-11 17:23:47
    1. 首先安装vue插件,安装方法:  setting --> plugin ,点击plugin,在内容部分的左侧输入框输入vue,会出现两个关于vue的插件,点击安装即可。安装完成后,就可以看到,新建文件时,会vue文件的提示。  ...
  • setting plugins中找不到Vue.js插件 使用IDEA时打开Setting->Plugins找不到vue.js插件 看其他网友Marketplace和Installed找不到还会提示Browse repositories…但是2019.03U版本的我没有找到 官网下载...
  • VUE 插件安装与卸载

    千次阅读 2020-04-06 10:51:46
    来拿一个富文本框插件来举例 1、安装插件 npm install vue-quill-editor 2、卸载插件 npm uninstall vue-quill-editor
  • IntelliJ IDEA安装vue插件 如果要做vue项目开发,需要安装对应的插件。 如果不想安装插件,可以安装另外一个开发工具WebStorm,需要注册码破解。 打开File -> Settings -> Plugins,输入vue,搜索。需要安装...
  • vue 插件导航

    千次阅读 2019-01-18 10:04:10
    https://blog.csdn.net/hjh15827475896/article/details/78207066
  • vue插件之甘特图

    万次阅读 2019-05-15 15:23:57
    vue插件之甘特图 下载包 npm install dhtmlx-gantt --save 创建Gantt.vue文件 <template> <div ref="gantt"></div> </template> <script> import 'dhtmlx-gantt' export ...
  • idea安装vue插件

    千次阅读 2019-06-21 16:06:00
    1,安装Vue.js插件: file -> settings -> plugins,点击Browse repositories。 搜索vue,安装vue.js。(安装后重启idea,idea就能识别.vue文件了) ...
  • Vue插件汇总

    千次阅读 多人点赞 2019-09-03 23:19:03
    vue插件的Reactive层 vue-ts-loader - 在Vue装载机检查脚本 vue-pagination-2 - 简单通用的分页组件 vuex-i18n - 定位插件 Vue.resize - 检测HTML调整大小事件的vue指令 vue-zoombox - 一个高级zoombox leo-...
  • Vue2.0插件之三:使用vue-axios插件

    万次阅读 2018-02-01 11:12:00
    一、vue-axios插件的安装 使用 npm: $ cnpm install axios 二、vue-axios插件的引用 出于页面的优雅考虑,使用vue2.0 vue-cli脚手架的代码风格去实现。 1、创建引用文件: 用ide打开项目文件,在src目录...
  • 谷歌浏览器安装vue插件(vue-devtools)

    千次阅读 2020-05-17 21:21:39
    谷歌浏览器安装vue插件第一步 下载vue-devtools第二步 npm第三部 浏览器安装插件什么不对的地方,欢迎各位指导,共同学习! 第一步 下载vue-devtools 如果可以上谷歌商店,是可以直接安装的,不需要这么麻烦. 先去...
  • VUE插件整理

    千次阅读 2018-04-28 18:11:09
    1.VsCode官方插件地址:https://marketplace.visualstudio.com/vscodehttp://code.visualstudio.com/docs官网下载地址:http://code.visualstudio.com/2.使用方法,可以在官网中搜索需要的插件或者在VsCode的“”...
  • vue插件颜色选择器

    万次阅读 热门讨论 2019-05-30 11:11:35
    1.vcolorpicker使用方法 官方地址:http://vue-color-picker.rxshc.com/ 图例: /* main.js */ // 颜色选择器 ...Vue.use(vcolorpicker) <!--system.vue--> <template> <...
  • 今天闲来没事,把vue插件组件给大家总结了一下,也做了简单的分类,喜欢的可以收藏哦! UI组件 框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 123,755
精华内容 49,502
关键字:

vue的插件有哪些

vue 订阅