vue3 构建属于自己的组件库dxui

前言

为了我自己的组件库，我从去年下半年开始，到现在一直在运用vue3框架，写各种前端web常用的组件，从Button开始到Select，将来还会继续完善。

第一步，通过vue-cli搭建vue3框架

当然你用vite也可以，但后面将组建库打包到npm的方式，可能略有不同。

这篇文章介绍了如何快速搭建vue3项目 https://dengxi.blog.csdn.net/article/details/124837593

第二步，构建一个入口，将所有的组件统一管理

// src/components/dxui/index.ts
import Button from '../button/Button.vue'
import Card from '../card/Card.vue'
import BreadCrumb from '../breadCrumb/Breadcrumb.vue'
import CardGroup from '../cardGroup/CardGroup.vue'
import Checkbox from '../checkbox/Checkbox.vue'
import CheckboxGroup from '../checkboxGroup/CheckboxGroup.vue'
import Dialog from '../dialog/Dialog.vue'
import Slider from '../slider/Slider.vue'
import Switch from '../switch/Switch.vue'
import Tag from '../tag/Tag.vue'
import Tooltip from '../tooltip/Tooltip.vue'
import AnimationIcon from '../animationIcon/AnimationIcon.vue'// 分别导出，让别人可以按需引入
export {Button,Card,CardGroup,BreadCrumb,Checkbox,CheckboxGroup,Dialog,Slider,Switch,Tag,Tooltip,AnimationIcon
}const component = [Button,Card,CardGroup,BreadCrumb,Checkbox,CheckboxGroup,Dialog,Slider,Switch,Tag,Tooltip,AnimationIcon
]const Dxui = {install(App: any) {component.forEach((item: any) => {App.component(item.name, Button)})}
}export default Dxui

第三步 修改package.json ，对组件进行单独打包

// package.json
{"name": "dxui","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","build-dxui": "vue-cli-service build --target lib ./src/components/dxui/index.ts --name dxui --dest dxui"},"dependencies": {"@codemirror/lang-html": "^6.1.3","@codemirror/lang-javascript": "^6.1.1","@codemirror/theme-one-dark": "^6.1.0","core-js": "^3.6.5","lottie-web": "^5.9.6","vue": "^3.0.0","vue-class-component": "^8.0.0-0","vue-codemirror": "^6.1.1","vue-router": "^4.0.0-0","vuex": "^4.0.0-0"},"devDependencies": {"@typescript-eslint/eslint-plugin": "^4.18.0","@typescript-eslint/parser": "^4.18.0","@vue/cli-plugin-babel": "~4.5.11","@vue/cli-plugin-eslint": "~4.5.11","@vue/cli-plugin-router": "~4.5.11","@vue/cli-plugin-typescript": "~4.5.11","@vue/cli-plugin-vuex": "~4.5.11","@vue/cli-service": "~4.5.11","@vue/compiler-sfc": "^3.0.0","@vue/eslint-config-standard": "^5.1.2","@vue/eslint-config-typescript": "^7.0.0","eslint": "^6.7.2","eslint-plugin-import": "^2.20.2","eslint-plugin-node": "^11.1.0","eslint-plugin-promise": "^4.2.1","eslint-plugin-standard": "^4.0.0","eslint-plugin-vue": "^7.0.0","sass": "^1.26.5","sass-loader": "^8.0.2","typescript": "~4.1.5","vue3-dxui": "^1.0.1"},"eslintConfig": {"root": true,"env": {"node": true},"extends": ["plugin:vue/vue3-essential","@vue/standard","@vue/typescript/recommended"],"parserOptions": {"ecmaVersion": 2020},"rules": {"space-before-function-paren": [0,"always"],"@typescript-eslint/explicit-module-boundary-types": "off","no-unused-expressions": "off","@typescript-eslint/no-this-alias": "off","@typescript-eslint/no-inferrable-types": "off"}},"browserslist": ["> 1%","last 2 versions","not dead"]
}

新增了一条命令行

"build-dxui": "vue-cli-service build --target lib ./src/components/dxui/index.ts --name dxui --dest dxui"

打包命令解释：

–target lib 关键字 指定打包的目录 也就是 src/components/dxui/index.ts 作为打包的入口

–name 打包后的文件名字 dxui

–dest 打包后的文件夹的名称 dxui

第四步输入命令行开始打包

npm run build-dxui

第五步，修改package.json文件，为npm 发布做准备

//dxui/package.json
{"name": "vue3-dxui","version": "1.0.9","files": ["dxui"],"main": "./dxui/dxui.common.js","browser": "./dxui/dxui.umd.js","types": "./dxui/components/dxui/index.d.ts","scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","build-dxui": "vue-cli-service build --target lib ./src/components/dxui/index.ts --name dxui --dest dxui"},"dependencies": {"@codemirror/lang-html": "^6.1.3","@codemirror/lang-javascript": "^6.1.1","@codemirror/theme-one-dark": "^6.1.0","core-js": "^3.6.5","lottie-web": "^5.9.6","vue": "^3.0.0","vue-class-component": "^8.0.0-0","vue-codemirror": "^6.1.1","vue-router": "^4.0.0-0","vuex": "^4.0.0-0"},"devDependencies": {"@typescript-eslint/eslint-plugin": "^4.18.0","@typescript-eslint/parser": "^4.18.0","@vue/cli-plugin-babel": "~4.5.11","@vue/cli-plugin-eslint": "~4.5.11","@vue/cli-plugin-router": "~4.5.11","@vue/cli-plugin-typescript": "~4.5.11","@vue/cli-plugin-vuex": "~4.5.11","@vue/cli-service": "~4.5.11","@vue/compiler-sfc": "^3.0.0","@vue/eslint-config-standard": "^5.1.2","@vue/eslint-config-typescript": "^7.0.0","eslint": "^6.7.2","eslint-plugin-import": "^2.20.2","eslint-plugin-node": "^11.1.0","eslint-plugin-promise": "^4.2.1","eslint-plugin-standard": "^4.0.0","eslint-plugin-vue": "^7.0.0","sass": "^1.26.5","sass-loader": "^8.0.2","typescript": "~4.1.5","vue3-dxui": "^1.0.9"},"eslintConfig": {"root": true,"env": {"node": true},"extends": ["plugin:vue/vue3-essential","@vue/standard","@vue/typescript/recommended"],"parserOptions": {"ecmaVersion": 2020},"rules": {"space-before-function-paren": [0,"always"],"@typescript-eslint/explicit-module-boundary-types": "off","no-unused-expressions": "off","@typescript-eslint/no-this-alias": "off","@typescript-eslint/no-inferrable-types": "off"}},"browserslist": ["> 1%","last 2 versions","not dead"]
}

name 包名称，包名称得独一无二
verison 版本号，新的版本号得大于之前的版本号1.0.9
files 你真正想要上传供大家使用的文件，我直接将打包好的上传就好 dxui
main 别人下载时，引用后的主文件，这里是打包好的 ./dxui/dxui.common.js
browser 供html使用的文件 ./dxui/dxui.umd.js
types，用来提供类型声明的，因为类型声明没写好，现在暂不可用
删掉了 private，否则无法上传到npm，

第六步修改README.md

这个markdown文件介绍了组件如何使用，和相关其它内容。

第七步 npm登录后，直接发布

npm login
// 当然要输入账号密码，甚至验证码之类的才能登录成功，这些内容就不展示了
npm publish

上图表示一个公开的包已经成功发布了
npm地址 https://www.npmjs.com/package/vue3-dxui

感兴趣的同学可以按照上述流程自己试试，或者将包拉下来，试试组件好不好用，如果有组件有bug，可以在npm地址或者本篇博客下留言，我会回复或者修复。