步骤
- 用vite创建一个最简单的vue3.X项目
- 组件开发并导出
- 包的本地调试
- 上传github并发布npm
- 新插件下载，验证组件是否能正常使用
vue3.X组件开发
结构目录
image.png
- package/compenents: 组件代码
- package/utils: 接口类型定义、公共方法等
- src/App.vue: 组件演示页面
- index.ts：组件导出文件
组件开发啥的就自己发挥了，简单说下组件的安装和导出
组件注册
在每个component里创建一个index.ts文件做组件安装、导出的操作。
// package/compenents/XX/index.ts
import vue3Barrage from './vue3-barrage.vue';
import type { App } from 'vue';
vue3Barrage.install = (app: App): void => {
app.component(vue3Barrage.name, vue3Barrage);
};
export default vue3Barrage;
export const Vue3Barrage = vue3Barrage;
这样在main.js了就可以使用了
import { createApp } from 'vue';
import App from './App.vue';
import { Vue3Barrage } from '../packages/components/vue3-barrage';
// or import vue3Barrage from '../packages/components/vue3-barrage';
const app = createApp(App);
app.use(Vue3Barrage);
// or app.use(vue3Barrage);
app.mount('#app');
难点：在vue3.X里component.name怎么设置？
// 再写一个script，像下面这样，设置一个name
<script lang="ts">
export default { name: "vue3Barrage" };
</script>
<script setup lang="ts">
导出
这里说的导出是npm安装后的导出使用
在根目录创建component.ts和index.ts文件
// component.ts 用于汇总所有组件，只不过我就写了一个哈哈哈
import type { Plugin } from 'vue';
import { Vue3Barrage } from './packages/components/vue3-barrage';
export default [Vue3Barrage] as Plugin[];
// index.ts 注册组件并导出
import type { App, Plugin } from 'vue';
import Components from './component';
const INSTALLED_KEY = Symbol('INSTALLED_KEY');
export const makeInstaller = (components: Plugin[] = []) => {
const install = (app: App, options) => {
if (app[INSTALLED_KEY]) return;
app[INSTALLED_KEY] = true;
components.forEach(c => app.use(c));
};
return {
install,
};
};
export default makeInstaller([...Components]);
难点：不通过 index.ts注册并导出npm下载使用的时候会报错，所以我参看了element-plus的做了简单的导出，不报错了，能用
导出错误时使用报错
package.json修改和md文档编写
package.json的个别字段修改也是很有必要的，我认为主要的有以下几个：
- name：插件名称，注意不要和已有的npm包重名了
- private：防止意外发布私有存储库的属性，false时可以发布到npm
- version：版本号
- keywords：搜索时的关键词
- license：开源协议
- repository：代码存储库地址
- bugs：bug上报地址
然后就是md的使用文档了，写了别人用起来上手更快咯
包本地调试
通过本地调试后上传会避免很多麻烦，所以自测很重要，要测试的细致。不过我们这发布用户只会是自己！！但本地调试也是很有必要的
- 在本地使用项目的package.json里添加包路径
// package.json
"dependencies": {
"vue3-barrage": "F:/vue3-barrage"
}
- 新包链接测试项目
npm link 包名（package.json中的name）
link截图
这样就能实现本地调试的目的了，还是实时更新的。就两步很方便！！
npm 发布
测试的差不多了，就可以发布了
- 将代码提交到github，因为npm需要的，在Repository和homepage里点击会自动跳转到代码存储库
- 首次发布就去npmjs.com注册个账号，然后在本地cmd登录，publish发布，具体的可以去百度下，csdn上很多这样的贴子
上传成功会会有如下提示：
publish成功
在npmjs.com也能搜到这个插件！！
下载使用
一般有本地测试的包都不会有太大问题
这样自己的组件库就发布成功了
注意：刚发布的包去下载会报错，不存在这个版本的插件，等一会再去下载就行了
未存在该版本的包
总结
这样一个自己的npm包就发布了
全程没有多少难点，都可以百度找到解决办法
