写在开始之前
接触Vue3也有一年的时间了，除了刚开始用Vue3做了一个小小的项目，其后一直没有机会在项目中真正使用Vue3，反而一直维护Vue2的老项目。作为一个有追求（wuliao）的前端，那就自己开一个git仓库练手吧，想试验什么就随便试，既没有deadline的压力，也不用去考虑产品需求，UI还原度。
萌芽期的git仓库地址 https://github.com/lucidity99/mocha-vue3-system
主要使用的工具（排名不分先后）：
- Vue3
- Vite
- TypeScript
- Element Plus
- Pinia
- SCSS
- Tailwind CSS
- VueRouter
- eCharts
- Eslint、Prettier
模拟接口数据本来打算用Mockjs，最后决定使用Apipost，感觉更贴近实际开发，接口管理也方便。
个人目前的难点是Typescript，还不能真正的把ts用好，代码动不动就爆红，所以练手的目的之一就是精进ts。
计划要做的内容比较多，除了基础的系统设置、功能模块，还有一些一直想尝试但是未曾在参与Vue项目实现过的功能
- 切片上传文件
- 复杂的表格设置
- 换肤功能（目前已实现暗黑模式，但是更复杂的换肤还没有开始做）
- 各种主流富文本插件引入
- 尝试Vue3新加入的功能
- 路由的配置
- 更多配置的axios拦截器
- …
Tailwind CSS是我很感兴趣的原子类CSS库，在以往的使用中，感觉能够实实在在的提升开发体验，后期还打算尝试现在流行的unocss
开始项目
创建Vite项目，安装所需的各种依赖
npm create vite@latest
安装Element Plus，使用按需导入的方式 https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5 ， 这里埋了个坑，后面会说。
项目结构
｜- public
｜- src
｜- api
｜- assets
｜- components
｜- layout
｜- router
｜- store
｜- types
｜- utils
｜- views
App.vue
env.d.ts
main.ts
vite-env.d.ts
editorconfig
.env.develpment
.eslintrc.js
.prettierrc.
.auto-imports.d.ts
.components.d.ts
index.html
package.json
postcss.config.js
tailwind.config.js
tsconfig.json
vite.config.ts
基本上一个项目的雏形的就出来了。接下来先从layout布局开始。