最近突然心血来潮想搞一套自己的组件库,但是由于之前没有开发过插件,所以决定先从比较熟悉的vue插件来着手,先熟悉插件开发的大体流程。 本文从插件开发、插件发布到最终的插件使用来详细讲解如何一步一步实现一个自己的个人插件。
一.插件开发
本文所讲述的vue插件是基于一个自己之前的Vue3.0+TypeScript项目来进行开发测试并最终发布到npm上的。
- 新建一个vue3.0项目 可以借助vite或者vue-cli快速搭建一个项目,或者拿以前的项目过来用一下也可以,主要是为了插件测试的方便。
lib: // 所有插件存放位置
└─dynamic-number // 插件存放位置
│ index.ts // 插件导出
│ package.json // 插件信息
│ README.md // 插件文档
│
└─lib // 插件内容
number.scss // 样式
number.vue // 功能
- 开发Vue3.0插件
首先插件的开发跟平时写项目时组件的开发基本一样,就比如
number.vue
:
// 详细代码可以往下翻找到github地址查看
<template>
<div
id="dy-number"
ref="d"
:class="[
type ? `var-number-color--${type}` : `var-number-color--default`,
size ? `var-number-color--${size}` : `var-number-size--medium`
]">
<slot />
</div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'
const props = defineProps({
type: String,
size: String,
value: {
default: 100,
type: Number
},
during: {
default: 1,
type: Number
}
})
</script>
number.scss
是组件的样式文件不多介绍。
index.ts
文件是用来导出我们写的组件,使我们发布到npm上之后可以被使用。
// number.vue写我们的组件
import number from './lib/number.vue'
// 定义我们的插件
const myPlugin = {
// 方法的第一个参数是传入的Vue,第二个参数可以插件的自定义参数
install (Vue: any) {
// 将其注册为vue的组件,'number'是组件名,dynamic-number是我们开发的组件
Vue.component('dyNumber', number)
}
}
// 最后将插件导出,并在main.js中通过Vue.use()即可使用插件
export default myPlugin
到此插件基本就开发完了,接下来就是用我们刚才新搭建的或者自己以前的项目进行测试。
在项目文件main.ts
中引入我们刚开发的插件
// 自己的插件测试
import dyNumber from './lib/dynamic-number'
createApp(App).use(store).use(router).use(Element).use(dyNumber).mount('#app')
引入之后在页面中使用
<dy-number type="success" :value="score"/>
测试完成之后,就可以进行插件发布了。
二.插件发布
- 首先,需要注册自己的npm账号
- 注册完成之后,命令行输入
npm login
,按照提示依次输入:用户名、密码、邮箱,进行登陆。注意:npm源的地址需要指向http://www.npmjs.org
- 命令行输入
npm publish --access=public
进行插件发布。注意:发布前可以去npm官网搜索是否已经有同名的插件名字,如果有需要对package.json
中的name
字段进行更改。 - 之后的每次插件更新,都需要更新
package.json
中的version
版本号,再执行npm publish --access=public
进行更新。
三.插件使用
回到我们刚才项目的main.ts
文件,修改引入插件的代码即可。
import dyNumber from 'dy-lmuy-number'
createApp(App).use(store).use(router).use(Element).use(dyNumber).mount('#app')
插件效果:
项目github地址:github.com/Lmuy/huang
动态数字显示插件地址:www.npmjs.com/package/dy-…
因为期间搜索了很多资料对自己帮助很大,所以在这里列出来了,如果需要的可以自己查阅,非常感谢各位作者的分享。 参考文章一、参考文章二