介绍

一个快速启动项目的基本框架 使用Vue 3 + Typescript + Vite

使用 vue3.4 和 Typescript 使用 vite5 打包编译

包括了 vue-router 和 pinia

包括了 mock prettier eslint stylelint 等工具的基本配置

css使用unoCss

使用了 ui 组件 Ant Design Vue v4 并且引入按需加载 无需再导入

同时包含vueuse lodash dayjs

推荐使用包管理工具 pnpm

推荐使用volta管理nodejs

推荐使用visual studio code进行开发

推荐安装.vscode文件夹中的extensions的扩展(注意打开vscode时候的提示可以一件安装)

重点扩展unocss volar(vue office) prettier eslint stylelint

主要文件夹解释

• apis所有请求api的方法封装

• assets主要是图片 svg icon 等资源文件

• commons\models 是使用ts定义的会使用的模型

• commons\const.ts 是使用ts定义的常量

• components中是封装的一些与业务无关的组件 主要是对antdv的二次封装 使用unplugin-vue-components自动导入 可直接使用不用import 使用时候注意组件名称统一格式为q-xxxx

• componentsBusiness 中是封装的一些与业务有关的组件 使用unplugin-vue-components自动导入 可直接使用不用import

• enums 中是使用ts定义的枚举 例如路由名称等

• hooks 中是封装的一些简单的hooks 项目也引入了vueuse

  比较重要的hooks是useMitt 了解事件总线

• plugins 中是一些插件 和 自定义指令等

• routers 中定义了路由 vue-router

• stores 是状态管理 vue状态管理 pinia

• styles 中是样式文件 了解scss 这些文件已经使用vite全局导入

  • antFix.scss是对antdv样式的复写
  • global.scss中是一些通用的全局可使用的样式 也可以使用 tailwindcss unoCss
  • var.scss是一些定义的scss变量

• utils 中是一些插件的封装 例如axios number等

• views 中是主要业务代码存放的位置

一些规范

• vue组件命名使用大驼峰 其他文件命名使用小驼峰

• typescript编码规范

• vue3风格指南

学习路径

• html javascript css

• nodejs

• volta

• typeScript

• vue3

• vue-router

• pinia

• 事件总线mitt

• scss

• tailwindcss

• unoCss

• Ant Design Vue

其他

• 推荐使用git

• 代码使用git提交时候会自动进行lint检查(eslint stylelint vue-tsc)，如果失败不能提交

  可以手动执行pnpm lint 进行提前判断

• 推荐使用vscode的时候保存后自动使用prettier进行格式化vscode如何配置prettier在保存时候自动格式化

• 建议使用pnpm cz进行代码提交commitlint介绍