vue3编写组件库发布到npm的过程

一、 将src文件夹改成examples文件夹 改变后项目无法运行 需要在项目根目录新建vue.config.js文件
并加入如下配置
module.exports = {
pages: {
index: {
entry: ‘examples/main.js’,
template: ‘public/index.html’,
filename: ‘index.html’
}
}
}
二、在根目录中建文件夹packages 在该文件夹中编写自己的组件 结构如下

三、 在button文件夹中的index.js中写入一下代码
import myBtn from ‘./src/myBtn’
// 为组件提供 install 安装方法，供按需引入
myBtn.install = function (Vue) {
Vue.component(myBtn.name, myBtn)

}
// 默认导出组件
export default myBtn
四、在packages下的index.js中写入如下代码
import myBtn from ‘./button/index’
const components = [
myBtn
]
const install = function(Vue) {
// 判断是否安装
if (install.installed) return
components.map(component => {
Vue.component(myBtn.name, myBtn)
})
// 判断是否是直接引入文件
if (typeof window !== ‘undefined’ && window.Vue) {
install(window.Vue)
}
}
export default {
// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
install,
// 以下是具体的组件列表
myBtn
}
五、图中lib文件夹为打包生成，在package.json中加入以下配置即可

六、packages文件夹要在配置文件中配置成默认加载的文件夹，这时vue.config.js完整配置如下

add(__dirname + ‘package’) 中的dirname不能忽略 不然启动会报错
七、准备发包了 完善package.json文件配置如下

本文中的文件名称 读者可按照自己的需求更改
之后运行 npm login 登录npm 后 即可用 npm publish 发包了 发布成功后 在需要使用组件的项目中使用npm install 包名称 即可 这里的包名称为wjwui
八、使用组件包
在main.js中 引入文件
import 包名称 from 包文件夹 // 此例为 import wjwUI from ‘wjwui’
// 在vue中使用
Vue.use(wjwUI )
之后即可在页面中直接使用自己的组件了

使用

此过程只为参考 具体组件需读者根据需求封装