vue 开发插件
我们可以先查看 Vue 的插件的开发规范
我们开发的之后期望的结果是支持 import,require 或者直接使用 script 标签的形式引入, 就像这样:
ps: 这里注意一下包的名字前缀是 unisoft , 组件的名字前缀是 uni
- import UniSoftUI from 'unisoft-ui';
- // 或者 const CustomUI = require('unisoft-ui');
- // 或者 <script src="..."></script>
- Vue.use(UniSoftUI);
构建一个 Vue 项目
开发组件我们使用 webpack-simple 模板:
vue init webpack-simple <project-name>
ps: 这里我选择了 use Sass 因为之后开发组件会用到
目录结构如图:
├── src/ // 源码目录
│ ├── packages/ // 组件目录
│ │ ├── switch/ // 组件 (以 switch 为例)
│ │ ├── uni-switch.vue // 组件代码
│ │ ├── index.JS // 挂载插件
│ ├── App.vue // 页面入口
│ ├── main.JS // 程序入口
│ ├── index.JS // (所有) 插件入口
├── index.html // 入口 HTML 文件
开发单个组件:
先看一下目标效果:
开始开发:
在 packages 文件夹下新建一个 switch 文件夹用来存放 switch 组件的源码, 继续在 switch 文件夹中新建 uni-switch.vue 和 index.JS 文件
uni-switch.vue 组件:
- <template>
- <div class="uni-switch">
- <div class="wrapper">
- <span><slot></slot></span>
- <div :class="[{closed: !checked},'switch-box']"
- @click="handleChange(value)">
- <span :class="{closed: !checked}"></span>
- </div>
- <input
- type="checkbox"
- @change="handleChange"
- :true-value="activeValue"
- :false-value="inactiveValue"
- :disabled="disabled"
- :value="value"/>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: "UniSwitch",
- data() {
- return {}
- },
- props: {
- value: {
- type: [Boolean, String, Number],
- default: false
- },
- activeValue: {
- type: [Boolean, String, Number],
- default: true
- },
- inactiveValue: {
- type: [Boolean, String, Number],
- default: false
- },
- disabled: {
- type: Boolean,
- default: false
- }
- },
- computed: {
- checked() {
- return this.value === this.activeValue;
- }
- },
- methods: {
- handleChange(value) {
- this.$emit('input', !this.checked ? this.activeValue : this.inactiveValue);
- }
- }
- }
- </script>
- index.JS:
- // UniSwitch 是对应组件的名字, 要记得在 moor-switch.vue 文件中还是 name 属性哦
- import UniSwitch from './UniSwitch.vue';
- UniSwitch.install = Vue => Vue.component(UniSwitch.name, UniSwitch);
- export default UniSwitch;
好了基本完成了, 但是为了将所有的组件集中起来比如我还有 select, input, button 等组件, 那么我想要统一将他们放在一个文件这中便于管理
所以在 App.vue 同级目录我新建了一个 index.JS 文件
- import UniSwitch from './packages/switch/index';
- import UniSlider from './packages/slider/index';
- import UniNumberGrow from './packages/number-grow/index';
- import './common/SCSS/reset.CSS'
- // ... 如果还有的话继续添加
- const components = [
- UniSwitch,
- UniSlider,
- UniNumberGrow
- // ... 如果还有的话继续添加
- ]
- const install = function (Vue, opts = {}) {
- components.map(component => {
- Vue.component(component.name, component);
- })
- }
- /* 支持使用标签的方式引入 */
- if (typeof Windows !== 'undefined' && Windows.Vue) {
- install(Windows.Vue);
- }
- export default {
- install,
- UniSwitch,
- UniSlider,
- UniNumberGrow
- // ... 如果还有的话继续添加
- }
好了到这里我们的组件就开发完成了; 下面开始说怎么打包发布到 NPM 上
发布到 NPM
打包之前, 首先我们需要改一下 webpack.config.JS 这个文件;
- // ... 此处省略代码
- const NODE_ENV = process.env.NODE_ENV
- module.exports = {
- // 根据不同的执行环境配置不同的入口
- entry: NODE_ENV == 'development' ? './src/main.JS' : './src/index.JS',
- output: {
- // 修改打包出口,在最外级目录打包出一个 index.JS 文件, 我们 import 默认会指向这个文件
- path: path.resolve(__dirname, './dist'),
- publicPath: '/dist/',
- filename: 'custom-ui.JS',
- library: 'custom-ui', // 指定的就是你使用 require 时的模块名
- libraryTarget: 'umd', // libraryTarget 会生成不同 umd 的代码, 可以只是 commonjs 标准的, 也可以是指 amd 标准的, 也可以只是通过 script 标签引入的
- umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名. 否则就使用匿名的 define
- },
- // ... 此处省略代码
- }
然后, 再修改 package.JSON 文件:
- // 发布开源因此需要将这个字段改为 false
- "private": false,
- // 这个指 import custom-ui 的时候它会去检索的路径
- "main": "dist/unisoft-ui.JS",
发布命令只有两步骤:
- NPM login // 登陆
- NPM publish // 发布
完成之后我们就可以在项目中安装使用了
在项目中使用 unisoft-ui
在自己的项目中使用 unisoft-ui, 先从 NPM 安装
NPM install unisoft-ui -S
在 mian.JS 中引入
- import UniSoftUI from 'unisoft-ui'
- Vue.use(UniSoftUI)
在组件中使用:
- <template>
- <div id="App">
- <h1>{{msg}}</h1>
- <uni-switch v-model="isSwitch">
- <span class="text">{{switchText}}</span>
- </uni-switch>
- </div>
- </template>
- <script>
- export default {
- name: 'App',
- data() {
- return {
- msg: 'welecom to unisoft-ui',
- isSwitch: false,
- }
- },
- computed: {
- switchText() {
- return this.isSwitch ? '开' : '关';
- }
- },
- }
- </script>
注意: 在发布 NPM 包之前要先修改 .gitignore 去掉忽略 dist, 因为我们打包的文件也需要提交; 每次上到 NPM 上需要更改版本号, package.JSON 里的 version 字段
来源: https://www.cnblogs.com/liuyishi/p/9732386.html