Vue 开发插件

我们可以先查看Vue的插件的开发规范

我们开发的之后期望的结果是支持 import、require 或者直接使用 script 标签的形式引入,就像这样:
ps: 这里注意一下包的名字前缀是 unisoft ,组件的名字前缀是 uni

构建一个 Vue 项目

开发组件我们使用 webpack-simple 模板:

目录结构如图:

开发单个组件:

先看一下目标效果:
手把手教你封装 Vue 组件并使用 NPM 发布-LMLPHP

开始开发:
在 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 中引入

在组件中使用:

09-30 21:46