专栏介绍
- “本专栏将手把手带你实战一个标准的企业级中后台管理系统，你学到的不是零散的知识点，而是一套完整的、可复用的开发流程和解决方案。”
- “从项目搭建、架构设计到核心业务模块开发，我会分享每一步的最佳实践和十年总结的避坑心得。更重要的是，在专栏最后，我会教你如何从‘程序员’思维转变为‘工程师’思维，抽象封装属于自己的业务组件，这才是你职场进阶的关键。”
- “无论你是想深入学习Vue3生态，还是渴望在工作中独立承担项目，这个专栏都将为你提供巨大的帮助。”
技术选型
要打造一个企业级项目，选择合适的“装备”至关重要。我们的选择是：
- 构建工具： Vite （进行项目构建）
- 语言：TypeScript （开发语言）
- 样式： less （编写样式 ）
- 状态管理： pinia（vuex的进化版，更简单，更友好）
- 路由：vue-router（单页应用的导航系统，不可或缺）
- HTTP客户端：axios (数据请求)
- 代码规范： CommitLint + ESLint + StyleLint + Prettier + LintStage 进行团队项目规范
- UI库： ElementPlus 组件库（由饿了么技术团队开发）
构建配置：让项目能够跑起来
第一步：安装依赖
组装我们的"工具包"
# 安装Vite和Vue插件
npm install -D vite @vitejs/plugin-vue @vitejs/plugin-vue-jsx
# 安装TypeScript相关依赖
npm install -D @types/node @types/nprogress vue-tsc
依赖介绍
vite
- 作用：Vite 是一个现代化的前端构建工具，由 Vue 作者尤雨溪开发。
- 特点：
- 开发时基于浏览器原生 ES 模块导入，启动速度快，热更新（HMR）极快。
- 生产环境使用 Rollup 打包。
- 支持 Vue、React、Svelte 等框架。
- 使用场景：替代 Webpack，用于开发和构建前端项目。
📌 简单说：它是你项目的“开发服务器 + 构建工具”。
@vitejs/plugin-vue
- 作用：为 Vite 提供对
.vue单文件组件（SFC）的支持。 - 功能：
- 解析
<template>、<script>、<style>块。 - 支持 Vue 的编译时特性（如
defineProps、defineEmits等）。 - 支持 HMR（热模块替换）。
- 解析
- 必须安装：如果你的项目使用
.vue文件，这个插件是必需的。
📌 相当于 “Vite 如何理解
.vue文件”的桥梁。
@vitejs/plugin-vue-jsx
- 作用：为 Vite 提供对 Vue 中使用 JSX/TSX 语法的支持。
- 功能：
- 允许你在
.tsx或.jsx文件中写 Vue 组件。 - 支持
h()、createVNode等 JSX 渲染方式。
- 允许你在
- 使用场景：
- 你使用
render函数或 JSX 写组件。 - 一些库（如组件库）常用 JSX 来构建复杂逻辑。
- 你使用
📌 如果你不用 JSX，可以不装；如果用，就必须装。
@types/node
- 作用：为 Node.js 提供 TypeScript 类型定义。
- 为什么需要：
- 如果你的项目中有
.ts文件使用了 Node.js 的 API（如process.env、require、__dirname等），TypeScript 需要知道这些全局变量的类型。 - 常用于
vite.config.ts、nuxt.config.ts、server端代码等。
- 如果你的项目中有
- 注意：仅在开发时需要（
-D），因为类型定义不打包到生产环境。
📌 没它，TS 会报错：
Cannot find name 'process'。
@types/nprogress
- 作用：为
nprogress（一个轻量级页面加载进度条库）提供 TypeScript 类型支持。 - 使用场景：
- 你在项目中使用了
nprogress，例如：import NProgress from 'nprogress' NProgress.start() - 安装类型后，TS 才能识别
NProgress的方法和属性，提供自动补全和类型检查。
- 你在项目中使用了
vue-tsc
- 作用：Vue 的 TypeScript 类型检查工具，相当于 Vue 版的
tsc（TypeScript Compiler）。 - 功能：
- 检查
.vue文件中的<script>块的 TypeScript 类型。 - 支持生成
.d.ts类型声明文件（用于发布组件库）。 - 在构建或 CI/CD 中进行类型检查。
- 检查
- 常见用途：
vue-tsc --noEmit：只做类型检查，不输出文件（用于 CI）。vue-tsc --emitDeclarationOnly：生成.d.ts文件（用于发布 npm 包）。
📌 相当于 “让 TypeScript 能看懂
.vue文件里的 TS 代码”。
第二步：设置环境变量
在根目录创建环境变量文件，就像给项目设置不同的"工作模式"：
.env - 全局通用配置（所有环境都会加载）
# axios请求的 baseURL
VITE_APP_API_BASEURL = /api
.env.production - 生产环境配置（上线时启用）
npm run build时加载这个文件的配置
VITE_APP_API_BASEURL = /api
.env.development - 开发环境配置（本地开发时启用）
npm run dev时加载这个文件的配置
VITE_APP_API_BASEURL = /api
🚨 重要提醒：环境变量名必须用VITE_开头，这是Vite的"暗号"，不然它可不认哦！
第三步：环境变量类型声明
/types/env.d.ts
/// <reference types="vite/client" />
interface ImportMetaEnv {
// 我们每次添加完新的环境变量就在此添加一次ts类型
// 这样我们就能在使用 import.meta.env 时获得ts语法提示
readonly VITE_APP_API_BASEURL: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
这样配置后，你在代码中使用import.meta.env时就会有智能提示了，再也不用担心拼写错误！
第四步：Vite配置文件
在根目录创建vite.config.ts：
import { defineConfig, loadEnv } from 'vite';
import type { UserConfig, ConfigEnv } from 'vite';
import { fileURLToPath } from 'url';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
// 获取当前工作目录
const root = process.cwd();
// 获取环境变量
const env = loadEnv(mode, root);
return {
// 项目根目录
root,
// 项目部署的基础路径
base: '/',
publicDir: fileURLToPath(new URL('./public', import.meta.url)), // 无需处理的静态资源位置
assetsInclude: fileURLToPath(new URL('./src/assets', import.meta.url)), // 需要处理的静态资源位置
plugins: [
// Vue模板文件编译插件
vue(),
// jsx文件编译插件
vueJsx(),
],
// 运行后本地预览的服务器
server: {
// 是否开启https
https: false,
// 指定服务器应该监听哪个 IP 地址。 如果将此设置为 0.0.0.0 或者 true 将监听所有地址，包括局域网和公网地址。
host: true,
// 开发环境预览服务器端口
port: 3000,
// 启动后是否自动打开浏览器
open: false,
// 是否开启CORS跨域
cors: true,
// 代理服务器
// 帮助我们开发时解决跨域问题
proxy: {
// 这里的意思是 以/api开头发送的请求都会被转发到 http://xxx:3000
'/api': {
target: 'http://xxx:9000',
// 改变 Host Header
changeOrigin: true,
// 发起请求时将 '/api' 替换为 ''
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
// 打包配置
build: {
// 关闭 sorcemap 报错不会映射到源码
sourcemap: false,
// 打包大小超出 400kb 提示警告
chunkSizeWarningLimit: 400,
rollupOptions: {
// 打包入口文件 根目录下的 index.html
// 也就是项目从哪个文件开始打包
input: {
index: fileURLToPath(new URL('./index.html', import.meta.url)),
},
// 静态资源分类打包
output: {
format: 'esm',
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
},
},
},
// 配置别名
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'#': fileURLToPath(new URL('./types', import.meta.url)),
},
},
};
});
这个配置文件就像项目的"大脑"，控制了构建、开发服务器、打包等所有行为。
第五步：TypeScript配置
在根目录创建tsconfig.json：
{
"compilerOptions": {
// 编译出JS的目标ES版本
"target": "esnext",
// 使用的ES版本
"module": "esnext",
"allowJs": false,
// 用于选择模块解析策略，有'node'和'classic'两种类型
"moduleResolution": "node",
// 开启严格模式
"strict": true,
// 强制代码中使用的模块文件名必须和文件系统中的文件名保持大小写一致
"forceConsistentCasingInFileNames": true,
// 允许使用 xxx 代替 * as xxx 导入
"allowSyntheticDefaultImports": true,
// 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'
"jsx": "preserve",
// 用来指定编译时是否生成.map文件
"sourceMap": true,
// 通过为导入内容创建命名空间，实现CommonJS和ES模块之间的互操作性
"esModuleInterop": true,
// 是否可以导入 json module
"resolveJsonModule": true,
// 是否检测定义了但是没使用的变量
"noUnusedLocals": true,
// 是否检查是否有在函数体中没有使用的参数
"noUnusedParameters": true,
// 是否启用实验性的装饰器特性
"experimentalDecorators": true,
// ts中可以使用的库 这里配置为 dom 与 es模块
"lib": [
"dom",
"esnext"
],
// 不允许变量或函数参数具有隐式any类型
"noImplicitAny": false,
// 启用阻止对下载库的类型检查
"skipLibCheck": true,
// types用来指定需要包含的模块
"types": [
"vite/client",
"element-plus/global"
],
// 编译的时候删除注释
"removeComments": true,
// 使用绝对路径时使用baseUrl去解析导入路径
"baseUrl": ".",
// 为导入路径配置别名
"paths": {
"@/*": [
"src/*"
],
"#/*": [
"types/*"
]
},
// 配置虚拟目录
"rootDirs": []
},
// 指定需要编译文件
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"types/**/*.d.ts",
"types/**/*.ts",
"build/**/*.ts",
"build/**/*.d.ts",
"mock/**/*.ts",
"vite.config.ts"
],
// 指定不需要编译的文件
"exclude": [
"node_modules",
"dist",
"**/*.js"
]
}
这个配置文件告诉TypeScript如何理解你的代码，就像给JS戴上了"智能眼镜"。
第六步：指令配置
在package.json中添加脚本命令：
"scripts": {
"dev": "vite --mode development",
"build": "vite build --mode production"
}
现在你可以通过简单的命令来控制项目了！
第七步：启动项目
# 启动开发服务器
npm run dev
在浏览器里输入localhost:3000/将会看到下面这个页面
如果一切顺利，你会看到Vite快速启动，并在浏览器中打开你的项目。
项目打包
# 构建生产版本
npm run build
执行这个命令后，Vite会把你的代码优化、压缩，准备好上传到服务器。
🎉 恭喜！你已经成功配置了一个企业级的Vite + Vue3 + TypeScript项目！
这就像组装好了一辆高性能跑车的所有部件，现在只差点火启动了。到这里，这个项目已经能够真正"跑起来了"。
记得动手实践一下哦，光看不练假把式！遇到问题欢迎在评论区留言或文章末尾右下角联系哦！备注"csdn"免费答疑～
扫一扫
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
