vite+ts+monorepo从0搭建vue3组件库(六):发布组件库到npm

需要发布的包就是打包之后的产物：dlx-ui。

在dlx-ui下执行pnpm init,生成package.json

{
  "name": "dlx-ui",
  "version": "1.0.0",
  "description": "",
  "main": "lib/index.js",
  "module": "es/index.mjs",
  "types": "lib/src/index.d.ts",
  "files": [
    "es",
    "lib"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "dlx-ui",
    "vue3组件库"
  ],
  "sideEffects": [
    "**/*.css"
  ],
  "author": "chenxiaoman",
  "license": "ISC",
  "dependencies": {}
}

然后在打包目录下执行pnpm publish,发布组件库，如果未登录先执行npm login登录，然后设置npm镜像未官方的镜像npm config set registry https://registry.npmjs.org/,最后执行pnpm publish即可发布成功。发布成功之后可在npm的个人中心查看：

引用：

在一个vue3+vite项目中引用dlx-ui:

pnpm i dlx-ui

在main.ts中引入css文件和dlx-ui

// main.ts
import dlxui from 'dlx-ui'
import 'dlx-ui/lib/style.css'


app.use(dlxui)

在页面中使用：

<dlx-button type='primary'>primary</dlx-button>