vue插件封装基础流程
这里做简单的封装熟悉如何编写一个插件发布到npm并使用
创建一个Vue项目
开发组件我们使用 webpack-simple(比较方便,其他的创建也可以只要能构建打包配置就行)
vue init webpack-simple <project-name>
创建完成后基本形成以下目录结构
.
├── src/ // 源码目录
│ ├── assets // 静态文件
│ ├── lib /
│ │ ├── index.js // 组件集合代码
│ │ ├── vnjPaun // 组件(以vnjPaun为例)
│ │ │ ├── vnj-paun.vue // 组件代码
│ │ │ ├── index.js // 组件代码
│ ├── App.vue // 页面入口
│ ├── main.js // 程序入口
├── index.html // 入口html文件
.
vnj-paun.vue文件编写
这里就不做过多表述 正常项目中封装组件怎么来就怎么来
简单的写个文本展示
<template>
<div class="nj-plugin">{{ title }}</div>
</template>
<script>
export default {
name: 'vnjPaun',
data () {
return {
title: 'demo + hello + word'
}
}
}
</script>
<style lang="css" scoped>
.nj-plugin {
font-size: 32px;
color: red;
}
</style>
vnj-paun index.js文件
这个文件没什么好说的就是将该组件作为 Vue 插件,代码就三行这里就放在这吧:
// vnjPaun 是对应组件的名字,要记得在 vnj-paun.vue 文件中还是 name 属性
import vnjPaunfrom './moor-switch';
vnjPaun.install = Vue => Vue.component(vnjPaun.name, vnjPaun);
export default vnjPaun;
好了基本完成了,但是为了将所有的组件集中起来比如还有其他 select、 input、 button 等组件,那么我想要统一将他们放在一个文件这中便于管理
所以在lib文件下创建了一个index.js文件集中管理,直接代码看下就懂:
import HelloWorld from './lib/hello-world/index.js';
import VnjSwitch from './lib/switch/index.js';
// ...如果还有的话继续添加
const components = [
HelloWorld,
VnjSwitch
// ...如果还有继续添加
]
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,
HelloWorld,
VnjSwitch
// ...如果还有的话继续添加
}
测试组件
本地build以后 本地import插件
<!-- 省略部分代码 -->
<div id="app">
<p>hello Word!</p>
<vnj-switch >开关:</vnj-switch>
</div>
<script src="/dist/vnj-paun.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
color: 'red',
msg: 'hello world!',
lightSwitch: false
}
}
})
</script>
或者发布到npm直接安装在测试项目里面查看。
发布到NPM
在发布之前首先要对插件项目进行打包配置 webpack.config.js 这个文件;
// ... 此处省略代码
// 执行环境
const NODE_ENV = process.env.NODE_ENV
module.exports = {
// 根据不同的执行环境配置不同的入口
entry: NODE_ENV == 'development' ? './src/main.js' : './src/lib/index.js',
output: {
// 修改打包出口,在最外级目录打包出一个 index.js 文件,我们 import 默认会指向这个文件
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'vnj-paun.js',
library: 'vnj-paun', // 指定的就是你使用require时的模块名
libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的,也可以是指amd标准的,也可以只是通过script标签引入的
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},
// ... 此处省略代码
}
修改 package.json 文件(不修改情况下发布出去后安装插件包没有打包文件dist):
// 发布开源因此需要将这个字段改为 false
"private": false,
// 这个指 import custom-ui 的时候它会去检索的路径
"main": "dist/vnj-paun.js",
<-------------->
// 这里需要你有一个 npm 的账号,文章开头有官网链接
npm login // 登陆
npm publish // 发布
使用
import VnjPaunfrom 'vnj-paun'
Vue.use(VnjPaun)
剩下就是正常使用ui组件的方式去使用
PS: 修改 .gitignore 去掉忽略dist,因为我们打包的文件也需要提交;
(重要):每次上到npm上需要更改版本号,package.json 里的 version 字段;
这里只是简单的开发思维,比较粗糙大致原理就这样;多了解下类似element等开源大项目的 封装方式;
ps:后续在续上 element比较复杂组件 以及样式分布打包,敬请期待!