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

Vue3项目实战：从0到1开发企业级中后台系统（1）：颠覆认知！这才是搭建Vue3项目的“正确姿势”

news 2025/11/2 8:04:41

专栏介绍

“本专栏将手把手带你实战一个标准的企业级中后台管理系统，你学到的不是零散的知识点，而是一套完整的、可复用的开发流程和解决方案。”
“从项目搭建、架构设计到核心业务模块开发，我会分享每一步的最佳实践和十年总结的避坑心得。更重要的是，在专栏最后，我会教你如何从‘程序员’思维转变为‘工程师’思维，抽象封装属于自己的业务组件，这才是你职场进阶的关键。”
“无论你是想深入学习Vue3生态，还是渴望在工作中独立承担项目，这个专栏都将为你提供巨大的帮助。”

技术选型

要打造一个企业级项目，选择合适的“装备”至关重要。我们的选择是：

构建工具： Vite （进行项目构建）
语言：TypeScript （开发语言）
样式： less （编写样式）
状态管理： pinia（vuex的进化版，更简单，更友好）
路由：vue-router（单页应用的导航系统，不可或缺）
HTTP客户端：axios (数据请求)
代码规范： CommitLint + ESLint + StyleLint + Prettier + LintStage 进行团队项目规范
UI库： ElementPlus 组件库（由饿了么技术团队开发）

基础框架搭建

第一步：初始化package.json

新建一个空文件夹，使用命令工具打开，我是windows系统，使用的是cmd

npm init

在这里插入图片描述

这个命令会在我们的文件夹里生成一个package.json文件，记录项目的基本信息和依赖。

第二步：搭建目录结构

使用vscode打开我们的项目按照下面的目录结构创建好文件结构。一个好的结构就像是好的户型，住起来舒心，改起来顺心！

demo-admin/|- mock/        # 数据模拟（前端开发者的"后端替身"）|- public/      # 静态资源（这里的文件直接躺平，不参加打包）|- types/       # TS类型定义（给JavaScript戴上紧箍咒）|- src/         # 主要代码区（我们的主战场）|- api/           # 接口管理（和后端对接的"外交部"）|- assets/        # 资源文件（图片、字体等"军火库"）|- components/    # 通用组件（可复用的"乐高积木"）|- router/        # 路由管理（网站的"导航系统"）|- store/         # 状态管理（全局数据的"中央仓库"）|- styles/        # 样式文件（项目的"美容院"）|- utils/         # 工具函数（各种"瑞士军刀"）|- request/   # axios封装（网络请求的"专属司机"）|- views/         # 页面组件（不同的"房间页面"）

在这里插入图片描述

第三步：安装依赖

安装主要依赖，这些都是项目的“基础设施”

npm install axios pinia pinia-plugin-persistedstate vue vue-router

在这里插入图片描述

安装组件库（不需要手动造轮子，直接开干）

npm install element-plus @element-plus/icons-vue

在这里插入图片描述

安装typeScript 和 less，typeScript负责js开发，less负责css开发。

npm install -D typescript less

在这里插入图片描述

依赖介绍

vue：一款用于构建用户界面的 JavaScript 框架
axios：vue官方推荐http请求库
pinia：vue官方推荐状态管理工具
pinia-plugin-persistedstate：pinia数据持久化插件
vue-router：路由管理工具
typescript：使用TS语言
less：css预处理
element-plus：基于 Vue 3，面向设计师和开发者的组件库

第四步：创建基础文件

index.html

在根目录下创建，是项目的门面，对页面进行基础配置

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>vue3中后台企业级解决方案</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
</html>

/src/App.vue

项目的根组件

<template><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view>
</template>
<script setup></script>

/src/styles/reset.less

css重置，让不同浏览器表现一致，告别兼容性头疼。

html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {margin: 0;padding: 0;
}h1,
h2,
h3,
h4,
h5,
h6 {font-size: 100%;font-weight: normal;
}ul {list-style: none;
}button,
input,
select {margin: 0;
}html {box-sizing: border-box;
}*, *::before, *::after {box-sizing: inherit;
}img,
video {height: auto;max-width: 100%;
}iframe {border: 0;
}table {border-collapse: collapse;border-spacing: 0;
}td,
th {padding: 0;
}

/src/main.ts

项目的入口文件

import { createApp } from 'vue';
import App from './App.vue';
import './styles/reset.less';
const app = createApp(App);
app.mount('#app');

/src/views/home/index.vue

创建第一个页面，项目的首页。

<template><div class="hello-world"><div class="gradient-text">Welcome to the Vue world</div></div>
</template>
<script lang="ts" setup></script>
<style lang="less" scoped>
.hello-world {background-color: #2a2a2a;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;font-family: "Arial", sans-serif;
}.gradient-text {width: 100%;height: 100vh;line-height: 100vh;font-size: 68px;font-weight: bold;text-align: center;// background-color: #2a2a2a;background: linear-gradient(90deg, #00e6ff, #ffffff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 230, 255, 0.5),inset 0 0 10px rgba(0, 230, 255, 0.5);
}
</style>

第五步：配置路由

项目的导航系统。

/src/router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
// 配置路由
const routes: Array<RouteRecordRaw> = [{path: '/',name: 'Home',component: () => import('@/views/home/index.vue'),meta: {},children: [],
}];const router = createRouter({history: createWebHashHistory(),routes,
});router.beforeEach(async (_to, _from, next) => {next()
});router.afterEach((_to) => {});export default router;

在main.ts里引入路由

import { createApp } from 'vue';
import App from './App.vue';
import router from '@/router'; // ++
import './styles/reset.less';
const app = createApp(App);
app.use(router); // ++
app.mount('#app');

第六步：状态管理

项目的中央数据中心。

/src/store/index.ts

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia();
// 使用pinia数据持久化插件
pinia.use(piniaPluginPersistedstate);
export default pinia;

在main.ts中引入状态管理

import { createApp } from 'vue';
import App from './App.vue';
import router from '@/router';
import pinia from '@/store'; // 引入状态管理
import './styles/reset.less';
const app = createApp(App);
app.use(router);
app.use(pinia); // 使用状态管理
app.mount('#app');

第七步：请求管理

/src/utils/request.ts

import axios from 'axios';
import type {AxiosInstance,AxiosRequestConfig,AxiosResponse,AxiosError,InternalAxiosRequestConfig,
} from 'axios';const service: AxiosInstance = axios.create({baseURL: '/'timeout: 15000, // 超时时间（15秒后还没响应就放弃）});// 请求拦截器（发请求前的预处理）
service.interceptors.request.use((config: InternalAxiosRequestConfig) => {return config;},(error: AxiosError) => {return Promise.reject(error);}
);// 响应拦截器（收到响应后的“后处理”）
service.interceptors.response.use((response: AxiosResponse) => {// 这里可以统一处理响应数据return response;},(error: any) => {// 这里可以统一处理错误return Promise.reject(error)}
);export default service