最近有兴趣学习了一下vue插件开发,以及发布到npm上,项目里可以直接使用自己开发的插件,以下文章以开发一个消息提示的组件为例,记录一下开发的流程。
一、vue项目创建配置
创建vue项目的指令不多说,直接以下指令,这里我选择的vue2进行开发
vue create [项目名称]
创建好项目之后,把文件结构整理一下
-- my-toast-plugin
-- public
-- node_moudules
-- src
-- assets
-- components
-- tip-message
-- index.js
-- index.vue
-- icon
-- index.js
-- index.vue
vue项目创建之后默认的入口文件是main.js,这里个人习惯改成index.js,这样的话需要在vue.config.js文件里面配置一下webpack的入口,配置如下;配置好了之后在index.js里引入src/index.vue作为初始化实例。
my-toast-plugin/vue.config.js
module.exports = defineConfig({
chainWebpack: (config) => {
config.entryPoints.clear(); //清空默认入口配置
config.entry("main").add("./src/index.js"); //增加一个main入口,指向文件index.js
}
});
/src/index.js
import Vue from "vue";
import App from "./index.vue";
new Vue({
render: (h) => h(App),
}).$mount("#app");
二、组件设计
组件大概的设计的时候暂定四种类型的消息提示——success、error、warning、info,以及一个config方法,支持自定义配置,如下图所示,配色自己看着顺眼就好了。先来看看成品。
整个组件的显示就包含了三个元素,一个带边框的容器,一个icon图标还有一行消息提示文本,具体的样式开发不展开说,说一下怎么引入需要的icon。
三、icon引入
icon引入使用iconfont,这是阿里的矢量图标库,官网地址:阿里矢量图标库
在图标库里搜索找到自己需要的图标,鼠标悬浮可以看到有个购物车图标,把所需的图标全部添加到购物车中,点开购物车->点击添加到项目->新建项目,然后进入项目,选择font-class,点击下载到本地。
把解压得到的文件夹放入项目,这里我把文件夹下的所有文件都放入了src/icon文件夹,并且把iconfont.css文件复制了一份,后缀改为.scss,这里是为了统一全局样式都使用sass开发,最后在项目入口文件src/index.js引入样式,也可以在组件文件tip-message/index.vue引入。
import "../../icon/iconfont.scss";
//使用icon,这里的icon名称看自己iconfont上的项目,可自定义,例如icon-success
<i class="iconfont [icon名称]"/>
四、toast组件开发
第一步骤中的配置可以依照个人习惯配置,组件开发主要在component文件夹下进行开发,新建一个名为tip-message的文件夹,文件夹下包含两个文件,index.vue和index.js,index.vue用于组件模板、逻辑、样式开发,index.js文件用于暴露install方法,在install方法里添加实例方法,直接先看index.vue里代码
tip-message/index.vue
//模板和js代码
<template>
<div class="toast">
<div
v-if="visible"
:class="`toast-box toast-box-${options.type}`"
:style="`animationDuration: ${this.options.duration}s`"
>
<i :class="`iconfont icon-${options.type} tip-icon ${options.type}`"></i>
<span :class="`text-area ${options.type}`">{{ options.message }}</span>
</div>
</div>
</template>
<script>
import "../../icon/iconfont.scss";
export default {
name: "App",
data() {
return {
visible: false,
defaultOptions: {
type: "info",
message: "",
duration: 3,
},//默认配置项,在调用实例内的方法时候,默认使用该配置项内的选项,若有需要自定义的直接重写属性覆盖即可
options: {
type: "",
message: "",
duration: 3,
},//显示配置项
};
},
methods: {},
};
</script>
代码定义了一个options属性,该属性是支持插件用户配置的属性,由于只是一个demo,暂定只有三个可配置项,在使用插件的时候传入options.message或options对象,如:
this.$tMessage.info("这是一条测试的提示")
or
this.$tMessage.config({ message:"这是一条自定义配置的提示", duration: 1 })
options对象包含三个属性,如下表,不传则取默认值。
属性 | 描述 | 默认值 |
---|---|---|
type | 消息提示的类型,传入info、success、error或warning | info |
message | 消息提示的内容 | - |
duration | 消息提示显示的持续时长 | 3s |
接下来看index.js文件,该文件引入模板,并且暴露install方法,具体的install方法的使用可以参考vue官网:插件开发
其中也用到extend来构造子类,挂载到模板上,使用参考extend方法
tip-message/index.js
import tipMessage from "./index.vue";//引入组件文件
//install方法支持两个参数(Vue,options),其中Vue是构造器,options是可选的参数
tipMessage.install = (Vue) => {
const tipMessageConstructor = Vue.extend(tipMessage);//extend是构造子类的方法
let $vm = new tipMessageConstructor();//创建实例
let $el = $vm.$mount().$el;//实例渲染完成后,获取元素
document.querySelector("body").appendChild($el);//dom元素挂载到body元素的子元素
//实例的显示隐藏方法,通过定时器控制duration*1000ms后隐藏
$vm.visibleFn = () => {
$vm.visible = true;
setTimeout(() => {
$vm.visible = false;
}, $vm.options.duration * 1000);
};
//遍历创建五种类型的实例提示方法,给实例的显示配置属性赋值
["config", "warning", "success", "error", "info"].forEach((_option) => {
if (_option === "config") {
$vm[_option] = (options) => {
$vm.options = { ...$vm.defaultOptions, ...options };
$vm.visibleFn();
};
} else {
$vm[_option] = (options) => {
$vm.options.type = _option;
$vm.options.message = options;
$vm.options.duration = $vm.defaultOptions.duration;
$vm.visibleFn();
};
}
});
Vue.prototype.$tMessage = $vm;//实例注册到原型
};
export default tipMessage;
到此为止,组件的开发已经完成。
五、发布到NPM
回到第一步骤中我们配置了webpack入口文件是src/index.js文件,因此我们在发布到npm上之前先在src/index.js里引入组件并且暴露,以及package.json文件里配置我们的插件名称以及版本。
src/index.js
import tMessage from "./components/tip-message/index.js";
export { tMessage };
package.json
{
"name": "tip-message-plugin",
"version": "0.1.2",
"private": false,
}
然后可以直接发布到npm上
//登录npm
npm login
//切换镜像
npm config set registry https://registry.npmjs.org/
//发布
npm publish
发布结束之后就可以在npm官网看到自己的插件啦~如果需要版本迭代的话需要在package.json里吧version改一下,同一版本会发布失败,整个流程大致就是这样