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

墨蓝 2023-02-22 13:58 25阅读 0赞

**一、 将src文件夹改成examples文件夹 改变后项目无法运行 需要在项目根目录新建vue.config.js文件  
并加入如下配置**  
module.exports = \{  
pages: \{  
index: \{  
entry: ‘examples/main.js’,  
template: ‘public/index.html’,  
filename: ‘index.html’  
\}  
\}  
\}  
**二、在根目录中建文件夹packages 在该文件夹中编写自己的组件 结构如下**  
![以myBtn组件为例][myBtn]  
**三、 在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中加入以下配置即可**  
![name为组件库名称][name]  
六、packages文件夹要在配置文件中配置成默认加载的文件夹，这时vue.config.js完整配置如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dqdzAxMjU_size_16_color_FFFFFF_t_70]  
add(\_\_dirname + ‘package’) 中的dirname不能忽略 不然启动会报错  
**七、准备发包了 完善package.json文件配置如下**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dqdzAxMjU_size_16_color_FFFFFF_t_70 1]  
本文中的文件名称 读者可按照自己的需求更改  
之后运行 npm login 登录npm 后，然后输入npm who am i命令如果出现自己的账号名称，证明登陆成功了， 即可用 npm publish 发包了 发布成功后 在需要使用组件的项目中使用npm install 包名称 即可 这里的包名称为wjwui  
**八、使用组件包**  
在main.js中 引入文件  
import 包名称 from 包文件夹 // 此例为 import wjwUI from ‘wjwui’  
// 在vue中使用  
Vue.use(wjwUI )  
之后即可在页面中直接使用自己的组件了  
![在这里插入图片描述][20200116152446868.png]  
使用  
![在这里插入图片描述][20200116152532170.png]  
此过程只为参考 具体组件需读者根据需求封装

[myBtn]: https://img-blog.csdnimg.cn/20200116151011510.jpg
[name]: https://img-blog.csdnimg.cn/20200116151525528.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dqdzAxMjU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200116151704634.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dqdzAxMjU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dqdzAxMjU_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200116151848636.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dqdzAxMjU=,size_16,color_FFFFFF,t_70
[20200116152446868.png]: https://img-blog.csdnimg.cn/20200116152446868.png
[20200116152532170.png]: https://img-blog.csdnimg.cn/20200116152532170.png