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

Sherry Tian

已于 2025-11-01 22:03:11 修改

阅读量69

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue3项目实战：从0到1开发企业级中后台系统文章标签： vuejs vue3 typescript router pinia less 前端

于 2025-11-01 16:13:29 首次发布

本文链接：https://blog.youkuaiyun.com/misstianyun/article/details/151900217

Vue3项目实战：从0到1开发企业级中后台系统专栏收录该内容

3 篇文章

订阅专栏

专栏介绍

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