vue3.2封装组件

根据引用内容，Vue3.2封装一个组件库的过程包括以下步骤：
1. 组件的项目初建：
1-1. 创建项目；
1-2. 在`packages/button`目录下创建`index.js`文件；
1-3. 在`packages/button`目录下创建`index.vue`文件；
1-4. 在`packages`目录下创建`index.js`文件；
1-5. 在`App.vue`中使用组件；
1-6. 配置`package.json`；
1-7. 配置`main.js`和`vite.config.ts`。

2. 组件库之button组件：
2-1. 在`packages/button`目录下创建`index.vue`文件；
2-2. 在需要使用button组件的地方使用该组件。

3. 组件库之input组件：
3-1. 在`packages/input`目录下创建`index.js`文件；
3-2. 在需要使用input组件的地方使用该组件。

4. 发布npm组件库：
- 切换npm镜像为淘宝镜像：`npm config set registry https://registry.npm.taobao.org/`；
- 登录npm账号：`npm login`； - 执行打包命令：`npm run build`；
- 发布组件库：`npm publish`。

在Vue项目的`main.js`文件中，可以引入组件库并使用：

import "./assets/main.css";
import TUI from "xzl-vue-ui";
const app = createApp(App);
app.use(TUI);
app.mount("#app");

通过以上步骤，你可以完成Vue3.2封装组件库的过程，并可以在项目中使用该组件库。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue3.2从0-1封装一个组件库 （ 组件项目的创建 - 发布npm - 使用组件库 ）](https://blog.csdn.net/weixin_43845137/article/details/127256751)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue3.2二次封装antd vue 中的Table组件(基础封装)](https://blog.csdn.net/m0_57004866/article/details/120419733)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]