## 前言感觉从进入前端后，做的都是ToB的产品，要不然就是大屏，每次在写那些重复性的表格表单的时候就觉得时间过得好快，感觉一天啥也没做就结束了，但是专注在写重复性代码里好开心啊，这样就不用动脑了！但是今年，就特别想动脑子了，先是用`vue3 + antD`搞了个给家里用的进销存管理系统前端部分，然后现在又开始琢磨弄一个常用的组件库。所以接下来就开始讲讲我整个搭建的过程吧！ ## 创建组件库项目 > 基于vue3 + vite + Element Plus 技术框架，适用于PC端。 > ### 1. 安装vite脚手架 ```npm npm create vite@latest ``` ![图片.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/371fd49ae34b43ec8a04957a1b9c14b6~tplv-k3u1fbpfcp-watermark.image?) 在选择 variant 的时候，可以选择`customize with create-vue`，相当于自定义安装，可以选择安装`ESLint和Prettier`，增加代码的规范，我是为了快就直接选择了JavaScript。 ### 2. 改造项目结构 > 为了区分实际使用的包文件和测试文件
> 在根目录下新建packages目录，将原有的src目录修改为examples ![图片.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a3437c620dd043ff89f01d40e936354a~tplv-k3u1fbpfcp-watermark.image?)
由于项目的入口文件是**src**下的**main.ts**文件，所以需要将`index.html`文件里的地址修改为： ```html ``` ### 3. 安装UI框架和npm依赖包 ```npm npm install element-plus --save npm i ``` 在main.ts里引入Element Plus ```js import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import * as ElementPlusIconsVue from '@element-plus/icons-vue' import request from "@/api"; app.use(ElementPlus, {}); for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component); } ``` ### 4. 编写组件
PS:如果你不想看写的过程，可以直接🚀[dynamicModule使用文档](https://hku1zb8twe.feishu.cn/docx/IKdAdRXWqoVCizxvjrocCzlenQf) - 在packages目录下新建table目录、index.js文件 - 在table目录下新建table.vue和index.js文件 ```html ``` 用于导出该组件,name在`script`标签上，所以获取名字的形参是`__name` ```js import DynamicTable from "./dynamic-table.vue"; DynamicTable.install = (App) => { App.component(DynamicTable.__name, DynamicTable) } export default DynamicTable; ``` examples根目录下的index.js，用于导出所有的组件 ```js import DynamicTable from "./table/dynamic-table.vue"; export { DynamicTable } const components = [DynamicTable] const install = (App) => { components.forEach((item) => { App.component(item.__name, item) }) } export default { install } ``` ### 5. 修改配置项 - 在vite.config.ts修改打包配置 ```js build: { outDir: 'lib', lib: { // 指定组件编译入口文件 entry: resolve(__dirname, 'packages/index.js'), name: 'Vue3DynamicModule', fileName: 'vue3-dynamic-module' }, // 打包配置 rollupOptions: { external: ['vue'], output: { // 在 UMD 构建模式下位这些外部化的依赖提供全局变量 globals: { vue: 'vue' } } } } ``` - 在package.json增加exports对象,最后打包使用的就是这里面的配置 ```js "exports": { "./lib/style.css": "./lib/style.css", ".": { "import": "./lib/vue3-dynamic-module.mjs", "require": "./lib/vue3-dynamic-module.umd.js" } } ``` - 在根目录下添加`.npmignore`文件，忽略不需要上传到npm库的文件 ```lua .DS_Store node_modules /dist # local env files .env.local .env.*.local # Log files npm-debug.log* yarn-debug.log* yarn-error.log* # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw* # 以下是新增的 # 要忽略目录和指定文件 .vscode examples/ packages/ public/ vite.config.js *.map *.html ``` ### 6. 在examples进行引入组件测试新建一个table组件，直接在`App.vue`文件里引入： ```html ``` ### 7. 打包输出lib库 ```npm npm run build ``` 输出目录lib，里面包含以下几个文件， ![图片.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1715a070a44e49d691abe87ccd7e2238~tplv-k3u1fbpfcp-watermark.image?)
### 8. 上传到npm
首先你需要有一个npm账号，如果没有可以先去npm官网注册。接着你需要在项目下执行命令`npm login`，输入npm的用户、密码和邮箱，然后会给你发送一次性密码，接着就可以开始上传你的npm包了。 ![图片.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2df70340e32b4aeebf7f35d996f412c3~tplv-k3u1fbpfcp-watermark.image?)
出现红框里表示已经上传成功了，你可以去npm里查看你的包情况。注意❗ 每次上传的时候都需要修改`package.json`里面的`版本号`，否则上传的时候会报错。 ## 组件库源码 🚀[vue3-dynamic-module](https://github.com/baoyichi/vue3-dynamic-module) ## 组件详细使用说明 🚀[dynamicModule使用文档](https://hku1zb8twe.feishu.cn/docx/IKdAdRXWqoVCizxvjrocCzlenQf) 欢迎大家使用交流，组件还不够完美，但是还在完善的路上...