基于Vue3
,VitePress
, Rollup
,Gulp
等主流技术开发的组件库模板。内置打包组件、hooks、utils,可按需引入,支持TypeScript,让所有注意力都能放在文档编写和组件开发上。内置VitePress主题,免去写样式的烦恼,自带夜间模式,可自定义主题
- 最新技术栈:使用 Vue3/vite2 等前端前沿技术开发
- 组件文档:使用 VitePress 内置文档
- 支持:支持 TypeScript,支持按需引入
- 模板: 内置指令一键生成开发模板
- 组件打包:内置Esm、Commonjs打包模式,支持按需引入
- 规范:内置Eslint、StyleLint、Prettier统一规范
- node 和 git -项目开发环境
- Vite - 熟悉 vite 特性
- Vue3 - 熟悉 Vue 基础语法
- Es6+ - 熟悉 es6 基本语法
- VitePress - 熟悉 VitePress 基本使用
- element-plus - ui 基本使用
- 获取项目代码(https or ssh)
git clone https://github.com/jsxiaosi/xs-components-lib.git
git clone [email protected]:jsxiaosi/xs-components-lib.git
或者通过xs-cli
快速创建
npx @jsxiaosi/xs-cli create [project-name]
- 安装依赖
npm install
# 建议不要直接使用 cnpm 安装以来,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
# 如果下载依赖慢可以使用淘宝镜像源安装依赖
npm install --registry=https://registry.npm.taobao.org
- 运行内置模板调试组件
npm run dev
- 运行 VitePress 文档
npm run docs:dev
- 创建组件模板
npm run ct '组件名称'
- 打包组件库
npm run build
- 打包 VitePress 文档
npm run docs:build
-
参考 vue 规范
feat
新增功能fix
修复缺陷docs
文档变更style
代码格式refactor
代码重构perf
性能优化test
添加疏漏测试或已有测试改动build
构建流程、外部依赖变更 (如升级 npm 包、修改打包配置等)ci
修改 CI 配置、脚本revert
回滚 commitchore
对构建过程或辅助工具和库的更改 (不影响源文件)wip
正在开发中types
类型定义文件修改
-
或使用指令提交
npm run cz
- esLint - js 语法检测
- styleLint - 样式语法检测
- commitLint - git commit 提交规范检测
.
├── LICENSE
├── README.md
├── build
├── commitlint.config.js
├── docs # vitepress文档目录
├── effect # 调试模板
├── lib
├── node_modules
├── package-lock.json
├── package.json
├── packages # 公共组件目录
│ ├── components # 组件存放目录
│ ├── hooks # hooks存放目录
│ ├── theme-default # 组件样式存放目录
│ ├── utils # 公共方法存放目录
├── postcss.config.js
├── prettier.config.js
├── script
├── stylelint.config.js
├── tsconfig.json
└── typings