封装vue组件发布到npm进阶版（易管理）

1、新建一个项目（把没有用的东西都删掉）

2、顶部新建一个lib文件夹（用来存放组件）

• lib目录下新建tqy-button组件文件
• lib目录下新建index.ts入库文件（用来注册组件）

// 引用组件
import tqyButton from '../lib/tqy-button/index.vue'

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

// 批量注册
const install = (Vue: any) => {
  componentList.forEach(com => {
    Vue.component(com.name, com)
  })
}
// 暴露出去
export default install

3、上传时忽略文件.gitignore 配置 只留下 lib、package.json、README.md 这三就行

.DS_Store
/node_modules
/dist
/public
/src
babel.config.js
tsconfig.json
.browserslistrc

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

image.png

4、在package.json文件中添加一条脚本 "pub": "npm publish --access public" （上传到npmde命令）

• name 组件名称
• private 公开的（必须要是false,公开的）
• description 组件描述

{
  "name": "@tyyha/system-web",
  "version": "1.0.2",
  "private": false,
  "description": "测试一下呀",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "pub": "npm publish --access public"
  },
  ...
}

5、执行 npm run pub 发布到npm上

6、发布完成后 开始使用

• 安装

npm i @tyyha/system-web

• 在main.ts中引入

import systemWeb from '@tyyha/system-web/lib/index' 

createApp(App)
  .use(systemWeb)
  .mount('#app')

7、该组件在npm上的管理

• 直接修改组件代码完成后
• 更改版本号（每次更新必须修改版本号，否则报错）
• 再次执行 npm run pub 更新成功