pub-bbx-pc v1.2.6

pub-bbx-pc

git config

.git > config

[core]
	ignorecase = false // 确认开启大小写区分
	autocrlf = true // window 环境需开启

vscode 配置

• 安装插件 eslint
• vocode setting

"eslint.format.enable": true,
"editor.codeActionsOnSave": {
  "source.fixAll":true
}

依赖安装

nodeProxy

代理工具

pub-bbx-global

公用资源、工具等

pnpm run init:global // 项目统计没有此仓库 需要拉取global仓库
pnpm run upgrade:global // 项目打包前或者需要更新global仓库可以直接使用此命令

包管理工具 pnpm

使用统一的包管理工具 pnpm 使用介绍

严禁使用 npm | cnpm | yarn 等其他包管理工具

增加组件

通过命令创建组件 命令中提示输入组件名 使用 kebab-case 格式 如: file-item

$ npm run gen

命令执行后生成再 packages 目录下生成
|-- packages/components/name
| |-- src
| | |-- name.vue
| |-- style
| | |-- index.css
| | |-- index.ts
| |-- index.ts

|-- packages/theme
| |-- name.scss

根据 组件特性 手动添加组件到 pub-bbx-pc/下对应 components 文件中

components 注册全局调用组件 plugin 注册全局调用插件 tools 注册全局引用的工具 no-install-components 手动引用的组件

命名规范

文件名 kebab-case .vue name uppercamelcase 大驼峰

文件结构规范

• 组件文件放在 packages 目录下，对应样式文件放在 theme-chalk/src 目录下
• Form 表单组件文件放置在 packages/form/component 目录下，这些组件不对外开放，只在 form-item 中使用
  对应样式文件放在 theme-chalk/src/form-components 目录下
• 公用工具类放在 src 目录下，打包会排除并整体迁移到 lib 下

组件引用规范

• 组件内如果使用了 src 下面的工具 请使用 import 'bbx/src/*/', 单个组件打包使用此方式不会把引用的代码打包进组件内，会转译成 'shb-bbx-pc/lib/'的方式调用
• 组件如果使用了第三方工具包，请在 bin/config.js 中的 configExternals 中排除，防止打进包里，并在 package.json 中添加进 peerDependencies 中
• 组件内严格执行组件和样式分离，样式统一放置在 theme-chalk 里
• 组件如果需要引用第三方的安装包，请一定不要放在组件内，也统一在组件的样式文件中进行引入（组件不配置样式 loader！！！）

层级组件

• Feedback 类弹窗浮层 顶级 目前 2010
• model 页面层级（02-14 页面层级）300x
• 模块层级(事件、云仓列表) 200X

关联资料文档

• vueuse
• vue-demi
• tinycolor
• vite-plugin-vuedoc
• pnpm