这是我参与「第五届青训营 」伴学笔记创作活动的第12天

这是第一次接触组件封装，今天主要学习了组件封装的基本步骤以及需要注意的细节。

1.项目初始化

vite+vue3+ts

1.npm create vite

创建一个名为CCUI的vite项目

2.初始化后的项目结构

3.以button组件为例

1.写好.vue文件作为视图文件

2.在APP.vue文件中引入组件

3.Button - index.js用于将组件暴露，并在button目录下的index.js中使用instanll将自定义组件注册到app中

4.管理所有组件

5.在main.ts中注册

6.在App.vue中引入

7.部署成功

2.打包配置

1.package.json中取消私有才能在npm发布

package.json配置详解 - 掘金 (juejin.cn)

2.配置-打包后的出入口文件

vite.config.ts配置vite打包时的入口文件

3.再配置package.json

main 字段作为入口文件

4.添加npm用户并发布

1.npm adduser

2. npm publish

5.使用发布的组件