npm发包前的准备

1.为需要支持按需引入的组件添加入口文件（如果不需要支持按需引入可以跳过）

以下内容均以封装一个<base-h1>组件举例。

如需实现按需引入，则需要在每个组件的文件夹下添加main.ts文件(即：packages/h1/src/main.ts)，注册组件，代码如下：

import { App } from 'vue'
// index.vue为核心组件
import H1 from './index.vue'

Table.install = (app: App): void => {
    app.component(H1.name, H1)  //组件需要添加name属性
}

export default H1

举个例子，我的index.vue的内容格式如下：

// index.vue
<template>
  <h1> {{msg}}</h1>
</template>

<script lang="ts">
  export default {
    name: 'baseH1'
  }
</script>

<script lang="ts" setup>

  const props = defineProps<{
    msg: string 
  }>()

</script>

<style module lang="scss">
  
</style>

2. 添加组件库的入口文件index.ts

文件目录为：packages/index.ts，在该文件导出可按需引入的组件。

// packages/index.ts
import { App } from 'vue'
// 引入支持按需引入的组件
import baseH1 from './h1/src/main'

const components = [
  baseTable
]
const install = (app: App) :void=>{
  // 注册全局组件
  components.forEach(item => {
    app.component(item.name, item)
  })
}

export {
  baseH1
}

export default {
  version: '0.0.7-alph',
  baseH1,
  install
}

3. 在`package.json`文件中指定整个项目的入口文件

package.json文件中添加main属性用于指定整个组件库的入口文件，如下：

// package.json
{
   "name": "xxx-ui",
   "version": "0.0.7-alpha",
   "main": "packages/index.ts",
}

name属性用于声明你的组件库的名称，该名称会作为组件库的名称发布到npm上，version为当前组件库的版本号，每次发版都需要更新该属性，最终配置完成后的package.json文件：

{
  "name": "xxx-ui",
  "version": "0.0.7-alpha",
  "description": "vue3组件库",
  "workspaces": [
    "packages/*"
  ],
  "private": true,
  "main": "packages/index.ts",
  "author": "macuiling <macuiling1995@gmail.com>",
  "license": "MIT",
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },
  "devDependencies": {
    "@rollup/plugin-babel": "^5.3.1",
    "@rollup/plugin-commonjs": "^22.0.0",
    "@rollup/plugin-eslint": "^8.0.2",
    "@rollup/plugin-json": "^4.1.0",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@rollup/plugin-typescript": "^8.3.2",
    "@vuepress/bundler-vite": "^2.0.0-beta.49",
    "@vuepress/plugin-debug": "^2.0.0-alpha.6",
    "@vuepress/plugin-pwa": "^1.9.7",
    "@vuepress/plugin-pwa-popup": "^2.0.0-alpha.8",
    "@vuepress/plugin-register-components": "^2.0.0-beta.48",
    "@vuepress/plugin-search": "^1.9.7",
    "@vuepress/plugin-shiki": "^2.0.0-beta.46",
    "commitlint": "^16.2.4",
    "element-plus": "^2.2.8",
    "husky": "^8.0.1",
    "jest": "^28.1.0",
    "lerna": "^5.1.8",
    "less": "^4.1.3",
    "rollup": "^2.72.1",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-delete": "^2.0.0",
    "rollup-plugin-node-builtins": "^2.1.2",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-terser": "^7.0.2",
    "typescript": "^4.6.4",
    "unplugin-auto-import": "^0.7.1",
    "unplugin-element-plus": "^0.4.1",
    "unplugin-vue-components": "^0.19.5",
    "vuepress": "^2.0.0-beta.43",
    "vuepress-plugin-demoblock-plus": "^1.6.0",
    "vuepress-vite": "^2.0.0-beta.46"
  }
}

以上就完成了组件库和子组件的注册和封装，为了防止反复发包测试比较麻烦，此时就可以在其他项目中通过link的方式进行测试了。

测试使用：

在组件库项目中执行yarn link，它的作用是将调试的模块链接到对应的运行项目中去，我们也可以通过这个命令把模块链接到全局。
切换到需要使用该组件库的项目中，执行 yarn link xxx-ui，此时观察项目中的node_modules已经链接到该项目，就可以在项目中使用
在项目中使用：

<template>
  <base-h1 msg="hello world">
  </base-h1>
</template>
<script lang="ts" setup>
import {baseH1} from 'xxx-ui' 
</script>

⚠️注意：在反复测试时，每次link前都需要先执行npm unlink xxx-ui以解除链接，然后再重新link

npm发包

在npm官网注册一个npm账号：www.npmjs.com/
在终端执行npm adduser，会提示输入userName、密码、邮箱，如下：

登陆之后，在对应的项目下执行npm publish就会发包

⚠️注意：每次发包都需要更新版本号

Q&A

1. 在终端执行`npm adduser`，会提示输入userName、密码、邮箱，输入之后报错如下

npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmmirror.com/-/user/org.couchdb.user:woshipanghu - [FORBIDDEN] Public registration is not allowed
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy, or
npm ERR! 403 on a server you do not have access to.

如果你之前已经登陆过，可能会报错：

npm ERR! Unexpected token < in JSON at position 0 while parsing near '<!DOCTYPE HTML PUBLI...'

这两个报错都是因为本地的npm镜像使用的是taobao镜像导致的

解决方案：切回npm镜像：

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

2. 发包之后，在其他项目中安装依赖进行引用时，样式丢失的问题（仅限于基于element-plus二次封装的组件库）

参考链接：element-plus.gitee.io/zh-CN/guide…

需要手动安装 unplugin-element-plus并进行配置，安装前过程中，需要遇到如下问题：

执行yarn add unplugin-element-plus -D 插件时提示：

image (13).png

该问题可能是因为package.json配置了workspaces造成的，只需安装提示，在命令行中加入-W标识：yarn add unplugin-element-plus -D -W

安装时提示node版本的问题，只需切换到符合条件的node版本即可

image (14).png

在对应的组件中，引入样式，如下：

import { ElTable,ElTableColumn} from 'element-plus'
import 'element-plus/es/components/table/style/css'
import 'element-plus/es/components/table-column/style/css'

从零搭建vuepress2 + vue3 +element-plus 的组件库（二）之发布npm包