源码地址,如果对你有帮助的话希望不要吝啬你的 Star
本文主要记录一下如何基于Vue开发组件,并在npm 上发布。废话不多说,进入正题
Vue 开发插件
开发之前先看看官网的开发规范
我们开发的之后期望的结果是支持 import、require 或者直接使用 script 标签的形式引入,就像这样:
// 这里注意一下包的名字前缀是 custom ,组件的名字前缀是 moor// 这是因为那个名字发布包的时候被占用了(我做实验的时候叫 moor-ui)现在改成了custom-ui,但是组件的前缀懒得改import CustomUIfrom'custom-ui'; // 或者 const CustomUI = require('custom-ui');// 或者Vue.use(CustomUI); 复制代码
构建一个 Vue 项目
开发组件我们使用webpack-simple:
vue init webpack-simple复制代码
PS:这里我选择了 use sass 因为,之后开发组件会用到
开发组件的文件结构如下,参考了一下element 不过我们这个是简易版,仅供分享和自己使用
. src/ // 源码目录 packages/ // 组件目录 switch/ // 组件(以switch为例) moor-switch.vue // 组件代码 index.js // 挂载插件 App.vue // 页面入口 main.js // 程序入口 index.js // (所有)插件入口 index.html // 入口html文件 . 复制代码
好了,到这里准备工作做好了,我们可以开始开发组件了,接着上面的例子,下面开始开发一个switch组件。
开发单个组件
先看一下目标效果:
开始开发:在packages 文件夹下新建一个 switch 文件夹用来存放 switch 组件的源码,继续在 switch 文件夹中新建 moor-switch.vue 和index.js 文件

moor-switch.vue

这个文件是组件源码,我这里就不放源码了,这里就说一下我个人认为最重要的点吧,这也是封装表单类组件最为重要的点:
自定义组件绑定 v-model,官网地址
使用: