开发前需要阅读的文档

为项目集成ESLint、StyleLint、commitLint实战和原理

工具类

• @vueuse/core: composite方式的工具类
• @zxcvbn-ts/core: 密码强度检测库
• ant-design-vue: 蚂蚁金服UI框架
• axios: http网络库
• crypto-js: 加密库
• echarts：各种统计图库
• apexcharts: 另外一种统计图库
• lodash-es: Lodash exported as ES modules
• nprogress: 进度条
• path-to-regexp: 将路径字符串（如/ user /：name）转换为正则表达式
• qrcode: 生成二维码的 JavaScript 库
• sortablejs: 轻量级的拖放排序列表的js插件
• vditor: 浏览器端的 Markdown 编辑器,支持所见即所得
• xlsx: Excel表支持
• vue-i18n: vue国际化支持
• vue-router: vue路由管理器
• vue-types: vue可配置的属性类型
• vuex: vue状态管理库
• vuex-module-decorators: vuex装饰器让vuex模块写起来更直观

开发库

1. 规范类

   • husky: 帮我们自动生成.git/hooks目录下的shell script，我们便可以很轻松的使用更熟悉的Nodejs处理git hooks任务，而无需关注shell script的实现细节
   • @commitlint/cli：规范我们每一次的commit的工具
   • @commitlint/config-conventional: 社区中一些共享的配置，我们可以扩展这些配置，也可以不安装这个包自定义配置

2. 图标类

   • @iconify/json：以json格式表示的图标集合

3. 工具类

   • rimraf： 以包的形式包装rm -rf命令，用来删除文件和文件夹的，不管文件夹是否为空，都可删除

4. Vite插件

   • vite-plugin-mock: 用于本地及开发环境数据 mock
   • vite-plugin-html: 用于 html 模版转换
   • vite-plugin-style-import: 用于组件库样式按需引入
   • vite-plugin-imagemin: 用于打包压缩图片资源
   • vite-plugin-theme: 用于在线切换主题色等颜色相关配置
   • vite-plugin-compression: 用于打包输入.gz|.br文件
   • vite-plugin-svg-icons: 快速生成 svg 雪碧图

目录结构

.
├── build # 构建相关脚本
├── mock # 模拟数据
├── public # 静态资源
├── src # 项目代码
│   ├── api #请求相关
│   ├── assets # 静态资源
│   ├── components # 组件
│   ├── design  # 样式
│   ├── enums # 常量，枚举
│   ├── hooks # hooks
│   ├── logics # 逻辑相关
│   ├── layouts # 布局
│   ├── main.ts # 入口文件
│   ├── router #路由，菜单等
│   ├── locale #多语言文件
│   ├── settings # 配置文件
│   ├── plugins # 插件
│   ├── store # vuex
│   ├── utils # 工具类
│   └── views # 页面
└── types # 类型定义

开发工具

如果IDE是vscode的话,可以安装以下工具来提高开发效率及代码格式化

• Iconify IntelliSense: Iconify 图标插件
• windicss IntelliSense: windicss 提示插件
• I18n-ally: i18n 插件
• Vetur: vue 开发必备 （也可以选择 Volar）
• ESLint: 脚本代码检查
• Prettier: 代码格式化
• Stylelint: css格式化
• DotENV: .env文件高亮