Vue3+element-plus+vite 组件的二次封装-- 组件库发布到npm

Vue 笔记

本人是一个web前端开发工程师，主要是vue框架，整理了一些Vue常用的技术，一方面是分享，一方面是做总结，今后也会一直更新，有好建议的同学欢迎评论区分享 ;-）

序号	文章
0	组件库展示
1	通过JSON配置–头部搜索条件的封装组件
2	通过JSON配置–表单Table的封装组件
3	页脚的封装组件
4	通过JSON配置–Form表单的封装组件
5	生成npm组件库
6	发布到npm
7	vitest为组件库添加单元测试
8	vuepress为组件库生成文档
9	通过github或者gitee pages将组件库文档发布到线上，免费！
10	源码地址

---

组件库开发流程

Vue组件库专栏会按顺序执行一下流程，不断完善组件库开发流程

1. Vue3+element-plus+vite 组件的二次封装，封装了头部的搜索条件栏，tabel栏，分页栏，form表单，都设置成了通过json可配置项，方便复用；
2. 封装好了就开始打包，并且进行本地测试；
3. 组件库发布到npm；
4. 添加vitest单元测试框架；
5. 添加vuepress文档。

---

---

发布npm包

文章按照组件库开发流程进行编写，其他内容可查看Vue组件库专栏 ，本章节开始发布npm包。

---

0. README.MD

编码自述文件…
该文件会显示在发布的npm包的首页，看本文章最后一节，会展示~

---

1. npm官网注册账号

npm官网：点击此处

---

2. 配置package.json

npm官网package.json配置：点击此处

用了以下配置，可以实现关联依赖包自动加载，不过如果项目原先就引入了其他版本的element-plus会是怎么样呢？？？ 这里还没遇到过，大大们可以评论区发言~~~

1. name：是包名，不能重复，错了也会提醒你…
2. version：版本号，确保每次上传都不一样，错了也会提醒你…
3. files：别人npm i xxx（你的包名），别人能下载的文件，这边只给他dist，就是默认打包文件名
4. keywords：关键字，随意~，方便别人看到你
5. homepage：你的主页，后期用vuepress写好文档再改…
6. repository：仓库，这边用的是git
7. license：开源协议
8. peerDependencies：声明同等依赖包，就是你想要别人用你的依赖包的时候，还需要下载额外的依赖包，可以这样配置，这边是对element-plus的二次封装，所以需要设置一下。npm i xxx 安装了你的包后，会自动下载element-plus，不用手动下载...
9. browserslist：该项目对浏览器限制
10. main：主入口文件
11. exports：导出的包，这样，路人甲就可以在项目中import 这些文件了…

{
  "name": "penk-ui",
  "version": "1.0.2",
  "description": "对elementPlus进行二次封装的组件库",
  "files": [
    "dist"
  ],
  "keywords": [
    "vue",
    "element-plus",
    "ui组件库二次封装"
  ],
  "author": "penk",
  "email": "492934056@qq.com",
  "homepage": "https://gitee.com/penk666/penk-ui",
  "repository": {
    "type": "git",
    "url": "https://gitee.com/penk666/penk-ui.git"
  },
  "license": "ISC",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit"
  },
  "peerDependencies": {
    "element-plus": "^2.2.26"
  },
  "peerDependenciesMeta":{
    "element-plus":{
      "optional": true
    }
  },
  "dependencies": {
    "element-plus": "^2.2.26",
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@types/node": "^18.11.12",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/tsconfig": "^0.1.3",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "npm-run-all": "^4.1.5",
    "typescript": "~4.7.4",
    "vite": "^4.0.0",
    "vue-tsc": "^1.0.12"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "main": "./dist/penk-ui.umd.js",
  "module": "./dist/penk-ui.es.js",
  "exports": {
    ".": {
      "import": "./dist/penk-ui.es.js",
      "require": "./dist/penk-ui.umd.js"
    },
    "./dist/style.css": "./dist/style.css"
  }
}

这边新建一个vue项目

直接安装依赖包

npm i penk-ui

自动下载了element-plus相关依赖包~~
测试了一下，可以直接在main.js 引入并且使用...

---

3. 切换到npm源

部分用户一些操作失败可能是源的问题，这边可以用nrm工具，实现快速切换源。
安装：点击此处

---

4. 登录npm

npm login

// 控制台会提示输入相关信息
Log in on https://registry.npmjs.org/
Username:  // 用户名
Password: // 密码
Email: (this IS public) // 邮箱
Enter one-time password: // 如果之前做过 双因素身份验证 (2FA)，验证码
Logged in as xxx on https://registry.npmjs.org/.

---

5. 发布npm包

npm publish

6. 效果

penk-ui 包：点击此处