当前位置：首页 > news >正文

二、vue3后台项目系列——安装相关依赖、项目常用辅助开发工具

news 2025/9/15 6:14:48

为了快速开发，我们通常会借助第三方的工具辅助我们进行开发。

一般后台项目中：可以借助以下工具进行开发，但是不绝对，根据项目的需要进行选择安装。

这里我会先逐步安装：scss、Element-plus、vue router、vuex、axios、echarts、js-cookie、lodash。其他的后面会根据需要再进行补充安装。

一、基础工具安装

1. 安装 Sass/SCSS

Vue 项目中使用 SCSS 需要安装sass和sass-loader：

# 使用npm
npm install sass sass-loader --save-dev# 或使用yarn
yarn add sass sass-loader --dev

小解释：

在安装 sass 和 sass-loader 时使用 --save-dev（开发环境依赖）而不是 --save（生产环境依赖），是由它们的作用场景决定的：

核心原因：

sass 和 sass-loader 是开发阶段的编译工具，只在项目构建时起作用，不会被打包到最终的生产环境代码中。

sass：是 SCSS/Sass 语法的编译器，负责将 SCSS 代码转换为浏览器可识别的普通 CSS。
sass-loader：是 Webpack 的加载器，用于在项目构建过程中调用 sass 编译器处理 .scss 文件。

当项目打包上线时，所有 SCSS 代码已经被编译成了普通 CSS，此时 sass 和 sass-loader 就不再需要了。因此它们属于开发依赖，而非生产依赖。

如果误用 --save 会有什么问题？

增加生产环境包体积：这些工具会被打包到最终的项目文件中，导致上线后的代码体积变大，影响加载速度。
不必要的资源浪费：生产环境中根本用不到这些编译工具，打包进去纯属多余。

总结规律：

用 --save-dev（-D）的依赖：仅在开发 / 构建阶段需要的工具（如编译器、打包工具、代码检查工具等）。
用 --save（-S，npm5+ 可省略）的依赖：项目运行时必须的库（如 Vue、Element Plus、Axios 等）。

安装后就可以在 Vue 组件中使用 SCSS 了：

<style lang="scss">
// 可以直接写SCSS语法
$primary-color: #42b983;
.container {color: $primary-color;
}
</style>

2. 安装 Element Plus（Vue 3 版本的 Element 组件库）

Element Plus 是 Element UI 的 Vue 3 适配版本：

# 使用npm
npm install element-plus --save# 或使用yarn
yarn add element-plus

安装后需要在main.js中引入：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

3. 安装 Vue Router（路由）

Vue 3 对应的路由版本是 Vue Router 4：

# 使用npm
npm install vue-router@4 --save# 或使用yarn
yarn add vue-router@4

4. 安装 Vuex（状态管理），当然也可以选择pinia进行替换

Vue 3 对应的 Vuex 版本是 Vuex 4：

# 使用npm
npm install vuex@4 --save# 或使用yarn
yarn add vuex@4

配置示例

安装完成后，你可以按以下方式进行基本配置：

路由配置（src/router/index.js）

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: () => import('../views/About.vue')}
]const router = createRouter({history: createWebHistory(),routes
})export default router

Vuex 配置（src/store/index.js）

import { createStore } from 'vuex'export default createStore({state: {count: 0},mutations: {increment(state) {state.count++}},actions: {},modules: {}
})

在 main.js 中引入路由和 Vuex

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'
import store from './store'createApp(App).use(ElementPlus).use(router).use(store).mount('#app')

这样就完成了所有依赖的安装和基本配置，你可以开始在 Vue 3 项目中使用这些工具和库了。

二、其他工具安装

在 Vue 3 后台管理项目中，除了已安装的核心依赖外，通常还需要根据实际需求安装以下常用依赖，以提升开发效率和完善功能：

1. 网络请求相关

axios：处理 HTTP 请求（必备）
```
npm install axios --save
```
建议配合拦截器封装，统一处理请求 / 响应、错误和 token 认证
qs：处理 URL 参数序列化（尤其表单提交时）
```
npm install qs --save
```

2. 工具类库

lodash：提供大量实用工具函数（处理对象、数组等）
```
npm install lodash --save
```
date-fns：轻量级日期处理库（替代 moment.js）
```
npm install date-fns --save
```
js-cookie：处理 Cookie（存储 token 等）
```
npm install js-cookie --save
```

3. 表单处理

VeeValidate：表单验证（Vue 3 友好）
```
npm install vee-validate@4 --save
```
配合@vee-validate/rules使用预设验证规则
vue-hooks-form：基于 hooks 的表单库（轻量高效）
```
npm install @vue-hooks-form/core --save
```

4. 数据可视化（按需）

echarts：图表库（适合复杂数据展示）
```
npm install echarts --save
```
vue-echarts：ECharts 的 Vue 3 封装
```
npm install vue-echarts@6 --save
```

5. 权限管理

vue-permission：路由权限控制
```
npm install vue-permission --save
```

6. 开发辅助工具

unplugin-auto-import：自动导入 Vue API 和组件
```
npm install unplugin-auto-import --save-dev
```
unplugin-vue-components：自动导入组件（尤其 UI 库）
```
npm install unplugin-vue-components --save-dev
```
eslint + prettier：代码规范和格式化（开发必备）
```
npm install eslint prettier eslint-plugin-vue --save-dev
```

7. 其他常用

vue-i18n：国际化支持（多语言项目）
```
npm install vue-i18n@9 --save
```
nprogress：页面加载进度条
```
npm install nprogress --save
```
vue-pdf：PDF 预览组件
```
npm install vue-pdf@latest --save
```

按需选择原则

基础后台必备：axios + lodash + js-cookie + 代码规范工具
复杂表单：添加表单验证库
多语言：添加vue-i18n
数据可视化：添加图表库

安装后建议根据项目架构进行封装（如请求拦截、权限控制、全局组件注册等），形成可复用的基础框架。

三、安装mock进行模拟数据，如有后端则不需要，此处用来模拟开发中的请求

在 Vue 3 项目中，推荐使用 vite-plugin-mock 来实现 Mock 功能（尤其如果你是用 Vite 创建的项目），它能很方便地模拟后端接口数据。

安装步骤如下：

安装依赖

# 安装mock相关依赖
npm install mockjs vite-plugin-mock --save-dev

这里使用 --save-dev 是因为 Mock 服务仅在开发阶段使用，生产环境不需要。

在 vite.config.js 中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'export default defineConfig({plugins: [vue(),// 配置mock服务viteMockServe({// 本地开发时启用mocklocalEnabled: true,// mock文件所在目录mockPath: './src/mock/'})]
})

创建 Mock 数据文件
在 src/mock 目录下创建接口模拟文件，例如 user.js：

export default [{// 请求路径url: '/api/login',// 请求方法method: 'post',// 响应数据response: ({ body }) => {// 模拟验证用户名密码if (body.username === 'admin' && body.password === '123456') {return {code: 200,message: '登录成功',data: {token: 'mock-token-123456',userInfo: {id: 1,name: '管理员'}}}} else {return {code: 401,message: '用户名或密码错误'}}}}
]

使用 Mock 接口
在项目中直接请求定义的接口即可：

import axios from 'axios'// 调用登录接口
async function login() {const res = await axios.post('/api/login', {username: 'admin',password: '123456'})console.log(res.data)
}

这样就可以在不依赖后端接口的情况下，进行前端开发和调试了。如果是使用 Vue CLI 创建的项目，可以使用 vue-cli-plugin-mock，配置方式类似。