我们可以先查看Vue的插件的
我们开发的之后期望的结果是支持 import、require 或者直接使用 script 标签的形式引入,就像这样:
ps: 这里注意一下包的名字前缀是 unisoft ,组件的名字前缀是 uni
import UniSoftUI from 'unisoft-ui';
// 或者 const CustomUI = require('unisoft-ui');
// 或者 <script src="https://www.linuxidc.com/Linux/2018-10/..."></script>
Vue.use(UniSoftUI);
开发组件我们使用 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>
<div>
<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 window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export default {
install,
UniSwitch,
UniSlider,
UniNumberGrow
// ...如果还有的话继续添加
}
好了到这里我们的组件就开发完成了;下面开始说怎么打包发布到 npm 上
发布到 npm打包之前,首先我们需要改一下 webpack.config.js 这个文件;]