正文开始
Vue 开发插件
我们可以先查看Vue的插件的开发规范
我们开发的之后期望的结果是支持 import、require 或者直接使用 script 标签的形式引入，就像这样：
ps: 这里注意一下包的名字前缀是 unisoft ，组件的名字前缀是 uni
|
1
2
3
4
|
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 组件:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<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:
|
1
2
3
4
|
// 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 文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
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 这个文件;
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// ... 此处省略代码
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 文件:
|
1
2
3
4
|
// 发布开源因此需要将这个字段改为 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 中引入
|
1
2
|
import UniSoftUI from
'unisoft-ui'
Vue.use(UniSoftUI)
|
在组件中使用:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<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 字段