封装组件并发布npm流程（vue3+ts+webpack）

1、新建一个空项目并运行

vue create test(项目名)

2、封装组件---在src目录下新建文件夹 package----用来存放要上传的组件

• 待封装的组件放到package目录下，可多个

  
  image.png
• 注意：(组件写好后最好先本项目里引用一下，看组件是否显示成功)
• 在package目录下新建index.ts 利用Vue提供的公开方法install 配置注册组件，代码如下：

// 引用组件
import tqyButton from '@/package/tqy-button/index.vue'
import tqyInput from '@/package/tqy-input/index.vue'

//组件都写在这个数组中方便管理
const componentList = [tqyButton, tqyInput]

// 批量注册
const install = (Vue: any) => {
  componentList.forEach(com => {
    Vue.component(com.name, com)
  })
}

// 暴露出去
export default install

3、组件打包

在test项目的配置文件package.json中添加一条脚本 "package": "vue-cli-service build --target lib ./src/package/index.ts --name tqy-ui --dest tqy-ui"

• --target lib 关键字 指定打包的目录
• --name 打包后的文件名字

• --dest 打包后的文件夹名称

  
  image.png

执行打包命令: npm run package

• 打包后 项目中生成一个 tqy-ui的文件（里面是打包后的js、css文件）

  
  image.png

4、发布到npm

在tqy-ui文件夹下初始化一个package.json文件， 进入tqy-ui目录下，执行命令：npm init -y

• 执行完后后 tqy-ui目录下多出一个package.json文件

  
  image.png

• package.json 配置组件的一些基本信息 可按照官方规范来配置

  
  image.png

推送到npm仓库

• 注册npm账号（官网上注册）
• 设置npm源（大部分人为了下载速度快，用的淘宝镜像源，这里需要还原成npm仓库地址，否则可能有问题）

npm config set registry=https://registry.npmjs.org

• 添加npm用户，进入tqy-ui目录，执行命令：npm adduser 输入账号、密码等 (之前设置过得，可不用再次设置)

npm adduser

• 发布npm 执行命令

npm publish

• 注意：发布失败可能是名字重复，名字重复可在 tqy-ui/package.json里修改name

5、引用并使用

• 如果引用失败 又确实安装上了 ，在test/scr/shims-vue.d.ts中添加declare module 'tqy-ui';

declare module 'tqy-ui';