前言 Vue 项目开发过程中,经常用到插件,比如原生插件 vue-router.vuex,还有 element-ui 提供的 notify.message 等等.这些插件让我们的开发变得更简单更高效.那么 Vue 插件是怎么开发的呢?如何自己开发一个 Vue 插件然后打包发布到npm? 本文涉及技术点: Vue 插件的本质 Vue.extend() 全局方法 如何手动挂载 Vue 实例 Vue.use() 的原理 如何打包成 umd 格式 发布前如何测试 npm 包 一.定义 什么是Vue插件,…

创建库 本来以为很简单,结果配置了webpack之后,运行build就报错了,似乎不认识es6语法,于是先后安装了几个包: @babel/core @babel/preset-env babel-loader @babel/plugin-proposal-class-properties 进行了一些配置: // babel const presets = [ [ '@babel/env', { targets: '> 0.25%, not dead', useBuiltIns: 'usage',…

前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue-area-select     欢迎指正 准备 Vue官网插件部分 的介绍虽然很简单,但是还是好好刷一遍的.由于此插件较为简单,主要用到以下两个点: 1 . Vue的插件需要有一个公开方法install 2 . 通过全局方法 Vue.use() 使用插件,在下文有栗子 创建工程 初始化工程 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…

自己编写并发布一个Vue组件 1. 几种开源协议的介绍 https://blog.csdn.net/techbirds_bao/article/details/8785413 2.开始编写组件 新建plugin文件夹: 指定 组件.入口文件和package.json文件, 看一下各个文件内容: 1.package.json 是npm init生成的: 2.loading.vue 是编写的组件文件: 在loading.js中, 使用了 3.loading.js 是指定的入口文件: import L…

背景 项目中用到element-ui,里面用到了弹出组件,但是效果不太满意,于是自己就想写一个简单的弹出组件.目前已经发布到npm:可以通过npm i dialog-wxy -s 进行下载使用页面调用效果:在线查看 实现步骤 第一步 搭建vue简单工程 vue init webpack-simple dialog-wxy 创建好工程,在src 同层目录 新建文件夹 lib 用来编写源码:如图: 开始code 插件 插件写法,具体参考 https://cn.vuejs.org/v2/guide..…

需求背景 最近在项目中遇到了一个类似Collapse的交互需求,因此到github上找了一圈关于Vue Collapse的相关轮子,但是多少都有些问题.有的是实现问题,例如vue2-collapse,伸缩部分采用max-height指定动画,存在缺陷:还有的是扩展性问题,遇到定制场景比较棘手.因此,决定自己撸一个Collapse组件.从项目中的一个需求,到目前已将它开源并发布到npm,还是踩了许多坑的.代码虽然简单,但是过程却不太容易.因此这篇文章不是安利这款组件r-collapse-vue,仅…

#### 疑答 1.市面上已经有那么多插件可用,为什么还要造轮子?学习.借鉴思想.应用到开发 2.能否在项目中使用?与网上插件使用相同   更新维护问题怎么解决? 自身动力,使用者反馈等 #### 准备工具 1.官方文档https://cn.vuejs.org/v2/guide/plugins.html2.github.npm网站账号.node/npm.git3.代码工具:vscode #### 过程1.新建文件夹 vue-loading-text npm init 初始化 2.代码工具:vsc…

步骤 创建 vue 的脚手架 npm install -g @vue/cli vue init webpack 绑定 git 项目 cd existing_folder git init git remote add origin http://gitlab.alipay-inc.com/ampg/my-projec.git git add . git commit git push -u origin master 写组件 创建组件 src/components/xxx.vue 例如: <te…

前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础,了解一点 webpack Are you ready?  Go! 目录 编写自己的npm包 发布npm包 使用自己的npm包 更新npm包 最终效果 一.编写自己的npm包 1. 新建一个空文件夹 2. 进入文件夹,终端(cmd)运行 npm init 完成后会在目录下生成一个 package.js…