快速开始

版本要求

node >= v18.0.0
pnpm >= v8.6.0

注意：已经通过 package.json 文件增加限制

常用指令

安装 pnpm

组件库使用 pnpm 作为包管理工具，请确保已安装 pnpm。

npm config set registry https://registry.npmjs.org
npm install -g pnpm

安装依赖

pnpm  install

示例相关

pnpm  run  demo:dev
pnpm  run  demo:build
pnpm  run  demo:preview

文档相关

pnpm  run  docs:dev
pnpm  run  docs:build
pnpm  run  docs:preview

组件相关

pnpm  run  bui:build
pnpm  run  bui:publish
pnpm  run  bui:packtgz

注意：

项目中可直接进行安装：

pnpm  install  @vue3-simple-bui/bui

注意项目中要在 main.ts 中加载 bui 的样式, 用于项目打包时使用，组件直接按需加载引用即可。

import '@vue3-simple-bui/bui/dist/Bui.css'

业务方法

pnpm run platform:publish

图标相关

pnpm  run  svg-icons:build
pnpm  run  svg-icons:build

注意：

项目中使用时，需要安装依赖，主框架已经继承权限，直接安装即可：

pnpm  install -D @vue3-simple-bui/svg-icons

代码校验

pnpm run lint:eslint
pnpm run lint:stylelint
pnpm run lint:prettier
pnpm run lint:spell-check
pnpm run lint:lint-staged

项目目录

业务组将库采用 pnpm 的 monorepo 多包管理模式。 项目主要目录介绍

• demo 包 - 业务组件开发验证包
• docs 包 - 业务组件开发文档包
• packages 包 - 业务组件包

packages 包中主要包含

• bui 包 - 用于业务组件的开发
• platform 包 - 用于业务方法层面的开发
• types 包 - 用于业务组件的类型定义

注意：

业务组件的开发主要在 bui 包中进行。

开发工具

VSCode 编辑器

.vscode 文件下包含:

 extensions.json
 global.code-snippets
 settings.json

VSCode 插件

 vue-official
 eslint
 styleLint
 prettier
 code-spell-checker

规范要求

项目中已通过插件的形式进行了代码规范的检查，如 eslint、stylelint、prettier 等。

🚨

# 使用-n/--no-verify参数跳过检查

git  commit  -m  'feat(ci): 完善系统配置文件'  -n

# 禁用校验钩子
export HUSKY=0

git  commit  -m  'feat(ci): 完善系统配置文件1'
git  commit  -m  'feat(ci): 完善系统配置文件2'
git ...

# 重新启用钩子
unset HUSKY

规范范围

 Eslint             【做代码质量检查】
 StyleLint          【做样式检查】
 Prettier           【做代码格式化】
 Code-spell-checker 【中文拼写检查插件】
 Commitlint         【做提交信息规范检查】

单元测试

系统已经集成了 vitest, 现阶段只对 platform 包进行单元测试，后续根据业务放开对业务组件的单元测试。

pnpm  run  test