# Vue 3 + Vite + ElementPlus + JavaScript 后台管理系统模板 ## 废话写在前面对于咱这些在小公司摸爬滚打（混吃等死）的前端胶水工程师来说，经常面对的业务就是各种纷繁复杂（大差不差）的后台管理系统了，以前是 `Vue2 + ElementUI` 一把梭，现在都快 2026 年了 bro，AI 都不写公元前的那一套了，咱再不动一动挪一挪，那真有点说不过去了，新项目还是上点略新一点的活整整吧话说小公司讲究一个什么，那就是不讲究，额额，讲究一个快速开发业务，这里就不得不提一下 JavaScript 最初的灵活性了，用 TypeScript 总感觉有点自缚手脚，大炮打苍蝇的赶脚，而且就砸门那两碗水，写到最后也是 anyScript。所以还是使用 JavaScript 吧，不过该有的规范还是得有的，不然成石山了扣到咱头上也不好处理不是 ok 话不多杯，准备开整！（进入正题就不废话了，什么？你问我前面为啥要废话，废话，不是废话正经人谁看啊） *** ## 创建项目环境准备： * nodejs 版本：建议大于 20 * 使用 pnpm * VSCode 插件 - `Vue (Official)` 找一个看得顺眼的目录执行命令： ```bash pnpm create vite elementplus-js-admin -- --template vue ``` 解释下这段命令干啥的： | 分段 | 含义 | 注意事项 | | ---------------------- | --------------------------------- | --------------------------------- | | `pnpm create` | 调用 `pnpm` 的「脚手架生成器」 | 等价于 `npm create` / `yarn create` | | `vite` | 告诉 `pnpm` 要拉取的脚手架包是 `create-vite` | 底层会运行 `npx create-vite` | | `elementplus-admin-js` | 生成的**项目文件夹名** | 不要带空格、特殊符号 | | `--` | **参数分隔符** | 告诉 pnpm：后面是传给脚手架的参数，不是给 pnpm 的 | | `--template vue` | 传给 `create-vite` 的参数**指定模板** | 只能是 `vue`, `react`, `vanilla`… 之一 | 进入到刚创建的目录并执行： ```bash cd elementplus-js-admin pnpm dev ``` 好了，嗖的一下，大功告成（就问你快不快吧） ## 配置路径别名 `vue.config.js` 中： ```js import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' export default defineConfig({ resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)), }, }, }) ``` 另外，想要让 VSCode 在输入 `@` 的时候有智能提示，需要新建 `jsconfig.json` 文件： ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } }, "exclude": ["node_modules", "dist"] } ``` ## Element Plus ### 安装 ```bash pnpm add element-plus ``` ### 配置自动导入 (推荐) 为了获得最佳的开发体验和打包体积优化，推荐使用**自动导入**。需要安装两个插件： ```bash pnpm add -D unplugin-vue-components unplugin-auto-import ``` 简单介绍一下这两个插件的作用： * AutoImport ：让你在 JS 代码中直接使用 ElementPlus 的 **API** * Components ：让你在模板中直接使用 ElementPlus 的**组件** 如果要使用 ElementPlus 的图标，还需要安装自动导入 icons 依赖： ```bash pnpm add -D unplugin-icons ``` 然后修改 `vite.config.js`： ```javascript import vue from '@vitejs/plugin-vue' import { fileURLToPath, URL } from 'node:url' import AutoImport from 'unplugin-auto-import/vite' import IconsResolver from 'unplugin-icons/resolver' import Icons from 'unplugin-icons/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' import Components from 'unplugin-vue-components/vite' import { defineConfig } from 'vite' // https://vite.dev/config/ export default defineConfig({ plugins: [ vue(), AutoImport({ // 自动导入 vue 相关函数，如：ref, reactive, toRef 等 // imports: ['vue'], // 我是说如果，对 Vue3 还不熟，建议注释该行，手动导入 vue 相关函数 resolvers: [ // 自动导入 Element Plus 相关函数，如：ElMessage, ElNotification 等 ElementPlusResolver(), // 自动导入图标组件 IconsResolver(), ], eslintrc: { enabled: true }, // 生成 .eslintrc-auto-import.json，eslint 不报错 }), Components({ resolvers: [ // 自动注册 Element Plus 组件 ElementPlusResolver(), // 自动注册图标组件 IconsResolver({ enabledCollections: ['ep'], // element-plus 图标库 }), ], }), Icons({ // 自动安装图标库 autoInstall: true, }), ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)), }, }, }) ``` 实际使用示例： ```html ``` ## 主题配置新建 `src/styles/theme.scss`： ```scss /* Element Plus Theme Overrides */ /* https://element-plus.org/en-US/guide/theme.html#how-to-override-it */ @forward 'element-plus/theme-chalk/src/common/var.scss' with ( $colors: ( 'primary': ( 'base': #165dff, ), 'success': ( 'base': #009298, ), 'warning': ( 'base': #e6a23c, ), 'danger': ( 'base': #ff2664, ), 'error': ( 'base': #ff2664, ), 'info': ( 'base': #909399, ), ) ); ``` 配置 `vite.config.js`： ```js import AutoImport from 'unplugin-auto-import/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' import Components from 'unplugin-vue-components/vite' import { defineConfig } from 'vite' export default defineConfig(({ mode }) => { return { plugins: [ AutoImport({ resolvers: [ ElementPlusResolver({ importStyle: 'sass', // 核心作用是告诉 Vite 自动导入 Element Plus 组件的 SCSS 源码，而不是编译好的 CSS 文件，这是自定义主题生效的关键。如果不写（默认）：插件会自动导入组件对应的预编译 .css 文件。这些 CSS 是已经打包死的（例如主色定死了是 #409eff），在项目中定义的 SCSS 变量无法渗透进去，主题配置会失效 }), ], }), Components({ resolvers: [ // 自动注册 Element Plus 组件 ElementPlusResolver({ importStyle: 'sass', }), ], }), ], css: { preprocessorOptions: { scss: { additionalData: `@use "@/styles/theme.scss" as *;`, }, }, }, } }) ``` ## 本地图标前面说了如何使用 ElementPlus （第三方）的图标，如果要使用本地 svg 图标，需要安装插件： ```bash pnpm add -D vite-plugin-svg-icons ``` 此插件核心作用： 1. **自动扫描目录** → 递归读取 `src/assets/icons/*.svg` 2. **生成 SVG 雪碧图** → 打包成 **单个 .js** 文件，**减少 HTTP 请求** 3. **组件化调用** → 通过 `` 引用，**零配置** 4. **按需加载** → **只打包使用的图标**，**体积↓30%+** 5. **热更新** → **修改 SVG → 页面实时刷新** 6. **样式继承** → **CSS 改颜色/大小**，**无 DOM 操作** 如果会报错提示缺失 `fast-glob` 依赖，安装一下： ```bash pnpm add -D fast-glob ``` `vite.config.js` 中配置： ```js import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' export default defineConfig({ // ... plugins: [ createSvgIconsPlugin({ iconDirs: [fileURLToPath(new URL('./src/assets/icons', import.meta.url))], symbolId: 'icon-[dir]-[name]', }), ], }) ``` 准备图标： src/assets/icons/ ← 放所有 .svg ├─ home.svg ├─ user.svg └─ logo.svg 新建 `src/components/SvgIcon.vue`： ```html ``` `main.js` 引入： ```js import 'virtual:svg-icons-register' // vite-plugin-svg-icons 插件注册，生成雪碧图并注入 DOM，不引入会导致 svg 图标无法正常显示 import SvgIcon from './components/SvgIcon.vue' app.component('SvgIcon', SvgIcon) ``` 使用： ```html ``` ## Pinia 安装： pnpm add pinia 可以把 pinia 看作船新版本的 vuex，使用 composition API，类比一下，新建 `src/store/modules/index.js`： ```js import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', () => { // ref -> state const count = ref(0) // computed -> getters const double = computed(() => { return count.value * 2 }) // function -> actions function increment() { count.value++ } return { count, double, increment } }) ``` 导出创建的 store 模块，新建 `src/store/index.js`： ```js export * from './modules/counter' ``` main.js 中引入： ```typescript import { createPinia } from 'pinia' import { createApp } from 'vue' import App from './App.vue' app.use(createPinia()) app.mount('#app') ``` 实际使用案例： ```html ``` ## Vue Router 安装： ```bash pnpm add vue-router ``` 新建 `src/router/index.js`： ```javascript import { createRouter, createWebHistory } from 'vue-router' // 导入布局组件 (后续创建) import Layout from '@/layout/index.vue' const routes = [ { path: '/', component: Layout, redirect: '/dashboard', children: [ { path: 'dashboard', name: 'Dashboard', component: () => import('@/views/dashboard/index.vue'), // 自行创建 meta: { title: '首页' } } ] }, { path: '/login', name: 'Login', component: () => import('@/views/login/index.vue'), // 自行创建 meta: { title: '登录' } } ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` 在 `src/main.js` 中注册路由： ```javascript import { createApp } from 'vue' import './style.css' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') ``` ## Axios 安装： ```bash pnpm add axios ``` 新建 `src/utils/request.js`： ```js import { useUserStore } from '@/store' import axios from 'axios' const service = axios.create({ baseURL: '', timeout: 10000, }) // 请求拦截器 service.interceptors.request.use( (config) => { const userStore = useUserStore() if (userStore.token) { config.headers.token = userStore.token } return config }, (error) => { return Promise.reject(error) } ) // 响应拦截器 service.interceptors.response.use( (response) => { const { code, message } = response.data if (code === 200) { return response.data } ElMessage.error(message || 'Error') return Promise.reject(new Error(message || 'Error')) }, (error) => { if (error.response.data) { const { code, message } = error.response.data if (code === 500) { ElMessageBox.confirm('当前页面已失效，请重新登录', '提示', { confirmButtonText: '确定', type: 'warning', }).then(() => { localStorage.clear() window.location.href = '/' }) } else { ElMessage.error(message || 'Error') } } return Promise.reject(error.message) } ) export default service ``` > 需要根据后端实际返回格式调整相应部分代码新建 `src/api/user.js` ，待会 mock 数据后模拟请求： ```js import request from '@/utils/request' export const login = (data) => { return request({ url: '/api/user/login', method: 'post', data, }) } export const getUserInfo = () => { return request({ url: '/api/user/info', method: 'get', }) } ``` ## Mock 数据安装： ```bash pnpm add -D vite-plugin-mock mockjs ``` `vite.config.js` 中： ```js import { defineConfig } from 'vite' import { viteMockServe } from 'vite-plugin-mock' export default defineConfig(({ mode }) => { return { plugins: [ // ... viteMockServe({ mockPath: 'mock', enable: mode === 'development', }), ], } }) ``` 项目根目录下新建 `mock/user.js`： ```js import mockjs from 'mockjs' const userList = mockjs.mock({ // 属性 list 的值是一个数组，其中含有 1 到 10 个元素 'list|1-10': [ { // 随机生成id号 id: '@id', // 随机生成中文姓名 name: '@cname', // 属性 id 是一个自增数，起始值为 1，每次增 1 'id|+1': 1, // 随机生成ip地址 ip: '@ip', // 随机生成省市区地址 address: '@county(true)', // 随机生成邮政编码 zip: '@zip', // 随机生成18-70之间的年龄 'age|18-70': 20, // 随机生成日期 date: '@date("yyyy-MM-dd")', // 随机生成头像 avatar: "@image('')", }, ], }) export default [ { url: '/api/user/list', method: 'get', response: () => { return { code: 200, data: userList, } }, }, ] ``` 执行 `pnpm dev`，`vite-plugin-mock` 会根据你提供的 mock 数据自动代理接口。此时，你就可以在前端代码中正常请求 `/api/user`，并且获取到模拟的响应数据，使用示例： ```html ``` ![userlist.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c004ebf01f3a40058b17722404b8040e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5o6Y6YeR5oyW5Zyf:q75.awebp?rk3s=f64ab15b&x-expires=1772498550&x-signature=6WeM7rGZQpTXKMGPQEH30s0wbAc%3D) ## 搭建基础布局 (Layout) 准备用 AI 写个简单布局页面，新建 `src/layout/index.vue`： ```html ``` ## 创建基础页面在 `src/views` 下创建自己的业务页面，新建 `src/views/dashboard/index.vue`： ```html ``` ## 登录页面为了有头有脸再用 AI 搞个登录页面 `src/views/login`： ```html ``` 简单模拟下登录逻辑，需要在 mock 中创建模拟接口，然后在 `src/api` 下封装请求函数，最后到相关组件中进行调用 ## 效果登录页： ![login.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c96f4f350c4f4794aacd3ebe1814b46a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5o6Y6YeR5oyW5Zyf:q75.awebp?rk3s=f64ab15b&x-expires=1772498550&x-signature=KXCRmN3fHhzmPtr%2FCWZEkapSD6M%3D) 布局首页： ![layout.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9c34032d74ec48fba9e1739f37f80586~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5o6Y6YeR5oyW5Zyf:q75.awebp?rk3s=f64ab15b&x-expires=1772498550&x-signature=fCv269%2B75H4yppivqNJCuOy8ars%3D) 感觉比我写得好。。不想丸辣 ## 后续如果还有后续的话。。 * 使用 Nest.js 搭建一个权限系统后端 * 左侧路由菜单根据权限系统返回内容动态生成 * 完善页面基础内容 * 团队协作：代码风格统一与 git 提交规范源码会提交到这个地址 [elementplus-js-admin](https://github.com/singleGou/elementplus-js-admin)，欢迎 spa

我被点了：{{ counterStore.count }}

加倍：{{ counterStore.double }}

我被点了：{{ counterStore.count }}

加倍：{{ counterStore.double }}

欢迎回来