从零开始写一个Vue3+Element Plus的后台管理系统

news2024/11/28 11:48:25

写在开始之前

接触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