从零开始搭建自己的vue组件库——02测试发布

最新推荐文章于 2025-03-03 18:13:33 发布

原创

最新推荐文章于 2025-03-03 18:13:33 发布 · 907 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #npm

本文详述如何进行Vue组件库的本地测试、打包及发布到npm的过程。首先，在examples目录下进行本地测试，通过在main.js中引入组件并验证。接着，使用vue-cli3的库模式进行打包，并在package.json中配置打包命令。发布前，需修改private字段为false，并创建.npmignore文件。然后，使用npm账号登录并发布组件库到npm。最后，可在npm官网查看发布的代码库并安装使用。

从零开始搭建自己的vue组件库——02测试发布

引言
历史导航

引言

上一篇文章介绍了打造vue组件库的第一步创建项目，本章将继续介绍本地测试，以及发布到npm

历史导航

前一篇：从零开始搭建自己的vue组件库——01创建

本地测试

在这里插入图片描述
首先本地测试需要在examples里编写代码，可以按照正常的vue项目去写，唯一区别就是原来的src目录变成了examples目录，其他一切正常，在examples的main.js里引入packages的button，为了方便测试，直接添加成全局代码，此处因为只有一个button组件，所以是用的按需加载的方式，后续可以根据需要改成全量加载

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import Button from "../packages/index"

Vue.use(Button);

Vue.config.productionTip = false