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(component .name, component ) }) // 判断是否是直接引入文件 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 who am i命令如果出现自己的账号名称，证明登陆成功了， 即可用 npm publish
发包了 发布成功后 在需要使用组件的项目中使用npm install 包名称 即可 这里的包名称为wjwui
八、使用组件包
在main.js中 引入文件 import 包名称 from 包文件夹 // 此例为 import wjwUI from 'wjwui' // 在vue中使用
Vue.use(wjwUI )
之后即可在页面中直接使用自己的组件了

使用

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

• « 上一篇：html+css+js实现简单登陆注册界面
• » 下一篇：springboot实现用户登录功能