publink-test-pc v1.0.2

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
}

目录结构

|-- .browserslistrc
|-- .eslintrc.js // eslint 配置
|-- .gitignore
|-- .npmignore
|-- .prettierrc.js // 格式化配置
|-- babel.config.js
|-- components.json // 组件配置
|-- favicon.ico
|-- index.html // vite 本地启动 主入口
|-- package.json
|-- README.md
|-- tsconfig.json
|-- vite.config.js //
|-- vue.config.js
|-- yarn-error.log
|-- yarn.lock
|-- build // 打包配置
|-- examples // 示例文件
|-- lib // 组件打包
|-- packages // 组件开发
| |-- component-file // 一个组件一个文件夹 文件名 kebab-case
| | |-- index.js // 组件主入口
| | |-- src // 组件业务实现
| | |-- index.vue
| |-- theme-chalk // 样式文件夹 所有样式统一放置此文件夹
| | |-- gulpfile.js // 样式打包配置
| | |-- package.json
| | |-- componet-name.scss // 组件样式
| | |-- index.scss // 样式主入口
|-- src // 资源
| |-- filter
| |-- mixins
| |-- modal
| |-- utils
| |-- index.js // 该文件根据components.json自动生成 命令：npm run build:file
|-- tests // 测试

增加组件

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

$ npm run create:comp  

命令执行后生成再packages目录下生成
|-- component-file
| |-- src
| |-- index.vue
| |-- index.js

|-- theme-chalk
| |-- componet-name.scss

• 自动生成组件目录
• 自动生成组件样式文件
• 自动生成components.json
• 自动生成主入口src/index.js
• 自动生成样式主入口theme-chalk/src/index.scss

自动生成文件

以下路径文件自动生成，不要手动修改，否者打包会被重新生成 src/index.js 主入口
packages/them-chalk/src/index.scss 样式主入口
packages/them-chalk/src/form-components/index.scss form 表单样式主入口

命名规范

文件名 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！！！）

Project setup

npm run bootstrap

Compiles and hot-reloads for development

yarn dev

Compiles and minifies for production

yarn dist

Run your unit tests

yarn test:unit