前言
随着业务增长越来越快,为了提高团队的开发效率,减少造轮子,部门领导希望搭建一个前端组件库,也方便沉淀前端业务组件物料。之前阅读过 element-ui
部分源码,很早之前希望搭建一个组件库,很开心的接下这个任务
技术栈
调研分析目前项目的诉求,有以下几点:
- 产品项目要兼容 IE
- 支持多主题换肤
- 配套文档 + demo
- 拥抱新技术、开发快
- ……
为了减少投入和维护成本,基于 element-ui
这个优秀的组件库进行开发是一个很不错的选择
项目技术栈:
- 文档和主题使用 vuepress , vuepress-theme-hope
- 组件库 Vue 2.6+, 演示例子使用
Vue 2.7+
- CSS 自定义属性和 SCSS 变量 支持换肤
- Vite 3.2+ 开发环境
- rollup, gulp 打包构建项目
目录结构介绍
|-- douluo-ui|-- .cz-config.js # cz-customizable commit message 规范|-- .editorconfig # EditorConfig 配置|-- .eslintignore # eslint 忽略检测文件|-- .eslintrc.js# eslint 配置文件|-- .gitignore# git 忽略提交|-- .ls-lint.yml# ls-lint 文件命名规范 kebab-case 校验|-- .stylelintignore# stylelint 忽略检测|-- .versionrc.js # standa……rd-version 自动生成 CHANGELOG 配置|-- CHANGELOG.md# standard-version 根据 commit 信息自动生成|-- README.md # readme 项目介绍|-- babel.config.js # babel 配置文件|-- commitlint.config.js# commitlint 校验 comit message 配置|-- compoments.json # 项目组件路径|-- components.d.ts # vite ts 文件类型声明|-- gulpfile.js # gulp 打包 css|-- index.html# vite 入口文件 /examples/main.js|-- jsconfig.json # js 配置文件|-- package.json|-- prettier.config.js# prettier 格式配置|-- stylelint.config.js # stylelint 格式配置|-- vite.config.js# vite 配置|-- .husky# husky 配置| |-- commit-msg# commit 提