Vue 开发插件
我们可以先查看Vue的插件的开发规范
我们开发的之后期望的结果是支持 import、require 或者直接使用 script 标签的形式引入,就像这样:
ps: 这里注意一下包的名字前缀是 unisoft ,组件的名字前缀是 uni
构建一个 Vue 项目
开发组件我们使用 webpack-simple 模板:
目录结构如图:
开发单个组件:
先看一下目标效果:
开始开发:
在 packages 文件夹下新建一个 switch 文件夹用来存放 switch 组件的源码,继续在 switch 文件夹中新建 uni-switch.vue 和 index.js 文件
uni-switch.vue 组件:
index.js:
好了基本完成了,但是为了将所有的组件集中起来比如我还有 select、 input、 button 等组件,那么我想要统一将他们放在一个文件这中便于管理
所以在 App.vue 同级目录我新建了一个 index.js 文件
好了到这里我们的组件就开发完成了;下面开始说怎么打包发布到 npm 上
发布到 npm
打包之前,首先我们需要改一下 webpack.config.js 这个文件;
然后, 再修改package.json 文件:
发布命令只有两步骤:
完成之后我们就可以在项目中安装使用了
在项目中使用unisoft-ui
在自己的项目中使用unisoft-ui, 先从 npm 安装
在 mian.js 中引入
在组件中使用: