• 介绍
  • 使用
  • 主要依赖
• 规范
  • Git 提交规范
  • 书写顺序
  • CSS 命名
  • 代码注释
• 其他
  • 待办事项
  • Dev 依赖

介绍

DFC 前端工程，基于 Vue3 + Vite + Ant-design-vue2 + Typescript4

使用

# 克隆项目并安装依赖
git clone https://github.com/DragonFlyXD/dfcf.git
cd dfcf
yarn

# 初始化 husky
yarn husky install

# 运行
yarn dev

主要依赖

• vue3
• vite
• vue-router4
• vuex4
• ant-design-vue2
• axios
• dayjs
• nprogress
• lodash-es
• normalize.css

规范

代码提交、书写风格的规范

Git 提交规范

参考 vue - angular

• feat：新功能
• fix：修复 bug
• docs：文档
• style：代码风格变更，不影响程序运行
• refactor：重构
• perf：性能
• test：测试
• workflow：工作流
• ci：持续集成
• chore：依赖更新
• revert：撤销提交

书写顺序

• vue，参考 vue 官网
• css，参考 腾讯 alloy
• html，参考 腾讯 alloy

CSS 命名

命名规则：模块名__元素名--修饰符名，参考 BEM

代码注释

注释规范，参考 JSDoc Block Tags

在本项目中，输入触发词 jsc 显示注释模板

/**
  * @description 判断数据类型
  * @author longfei.chen
  * @date 2020.12.29
  * @param {unknown} val 判断数据
  * @param {string} type 数据类型
  * @returns {boolean} 判断结果
  */

其他

列举待办事项、Dev 依赖

待办事项

• 集成 Eslint
• 集成 SSR

Dev 依赖

• sass
• husky
• lint-staged
• commitlint
• typescript4
• prettier
• eslint
• eslint-plugin-vue
• eslint-config-prettier
• eslint-plugin-prettier
• vue-eslint-parser
• typescript-eslint