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

写在开始之前

接触Vue3也有一年的时间了，除了刚开始用Vue3做了一个小小的项目，其后一直没有机会在项目中真正使用Vue3，反而一直维护Vue2的老项目。作为一个有追求（wuliao）的前端，那就自己开一个git仓库练手吧，想试验什么就随便试，既没有deadline的压力，也不用去考虑产品需求，UI还原度。

萌芽期的git仓库地址 github.com/lucidity99/…

主要使用的工具（排名不分先后）：

• Vue3
• Vite
• TypeScript
• Element Plus
• Pinia
• SCSS
• Tailwind CSS
• VueRouter
• eCharts
• Eslint、Prettier

模拟接口数据本来打算用Mockjs，后来决定使用Apipost（最终改成了apiFox），感觉更贴近实际开发，接口管理也方便。

个人目前的难点是Typescript，还不能真正的把ts用好，代码动不动就爆红，所以练手的目的之一就是精进ts。

计划要做的内容比较多，除了基础的系统设置、功能模块，还有一些一直想尝试但是未曾在Vue项目中完整实现的功能。

• 切片上传文件
• 复杂的表格设置
• 换肤功能（目前已实现暗黑模式，但是更复杂的换肤还没有开始做）
• 多页签组件 juejin.cn/post/722990…
• 各种主流富文本插件引入 juejin.cn/post/723441…
• 尝试Vue3新加入的功能
• 尝试Vue3 hook，vueuse
• 路由的配置
• 更多配置的axios拦截器 juejin.cn/post/723407…
• ...

Tailwind CSS是我很感兴趣的原子类CSS库，在以往的使用中，感觉能够实实在在的提升开发体验，后期还打算尝试现在流行的unocss

开始项目

创建项目，并安装所需的依赖

创建Vite项目

npm create vite@latest

安装Element Plus

本项目选择自动导入的方式。

自动导入#

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

Vite 配置文件

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

这里埋了个坑，后面会提到。

安装SCSS

我喜欢SCSS更多一点，和Element Plus更配，如果你喜欢LESS也没问题（Vant、Ant都更适合LESS）。

npm install sass -D

不需要安装sass-loader和node-sass

安装tailwind css

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置tailwind.config

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx,vue}", // 这里记得加上vue，官网直接拷贝过来是没有的
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

引入样式文件

src/assets/css/index.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

安装Pinia

npm install pinia

安装vueRouter

npm install vue-router@4

安装eslint

项目结构

按照目录结构，在项目中建立所需文件夹

｜- 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布局开始。