This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.
- VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
1.进入项目 安装依赖且运行项目
# 使用 npm
npm create vite@latest
# 使用 yarn
yarn create vite
# 使用 pnpm
pnpm create vite
cd fastapi_vue_vite
npm install # or pnpm install
npm run dev # or pnpm run dev访问地址： http://localhost:5173/
初始化项目完成。
- 集成 eslint + prettier, 约束代码规范（重要）
注意1：需安装 vscode 插件: eslint、prettier、EditorConfig for VS Code 注意2：eslint 配置对新手来说可能有点复杂，可以暂时先使用我封装好 npm 包，后面再慢慢学习它的详细配置 注意3：配置完可重启 vscode 然后执行
npm run lint:fix可以一次性修复所有不符合约定规范的代码
- 配置 vite.config.js 和 jsconfig.json（重要但非必须）
3.1 配置 alias 别名： @/ 表示 src 路径 ~/ 表示跟路径
3.2 配置 jsconfig.json，目的之一就是为了 alias 别名有提示
- 配置样式相关的: 重置样式、全局样式、 sass、unocss
推荐安装 vscode 插件：
UnoCss
-
集成 vue-router，添加初始页面：首页和登录页（重要）
-
集成 pinia 状态管理，并支持持久化（重要）
-
集成 Naive UI，配置 unplugin（重要）
配置 unplugin 不是必须的，但它可以为开发提供极大的便利，使用 Naive UI 组件、Vue 和 Vue-Router 的api 时无需导入，并且是按需的，不会加大打包的体积
- 配置 Naive UI的主题和全局api，让其用起来更得心应手（重要）
此点非必要，但可能会影响后续的步骤
- 集成
iconfy图标方案（建议非必要）
使用方式， 如 建议安装vscode插件: Iconify IntelliSense
-
简单封装网络请求-axios，配置本地服务接口请求代理（重要）
-
完善登录页，并添加路由守卫控制没登录时跳转登录页（非常重要）
注：路由守卫里面每一步都写了详细的注释
-
补充退出登录逻辑
-
完善 layout 之整体布局
注: 为减少对 UI 组件的依赖，整体布局使用原生 html + unocss 完成，方便切换 UI组件时布局可以复用
- 完善 layout 之权限菜单（非常重要）
注: 提供两种生成菜单的方式，详情看
layout/index.vue
- 完善 layout 之头部（重要）
注: 含面包屑、退出登录等
- 完善首页（非必要）
注: 含
echarts示例，供参考
- 补充过度动画（非必要）
注:
transition内置组件只能有一个根节点
-
美化滚动条（非必要）
-
按钮权限（重要）
-
集成多tab栏（非必要）
注: 有一定难度，这不是必须的，但又好像是标配，已抽离出去，可自行选择是否需要
- 集成rollup打包分析插件，首页拆包优化