【前后端】Vue 脚手架与前端工程结构入门指南

---

文章目录

• 前言
• [定义概念 + 缩写](#定义概念 + 缩写)
• • • [Vue CLI（Command Line Interface）](#Vue CLI（Command Line Interface）)
    • Node.js
    • 前端工程化
• 性质（为什么使用脚手架）
• 使用步骤
• • [① 安装 Vue CLI（如未安装）](#① 安装 Vue CLI（如未安装）)
  • [② 创建项目](#② 创建项目)
  • [③ 启动项目](#③ 启动项目)
• 工程结构讲解（重点）
• • 重点文件/目录
  • • [**node_modules --- 当前项目依赖的 JS 包**](#node_modules — 当前项目依赖的 JS 包)
    • [**public --- 静态资源根目录**](#public — 静态资源根目录)
    • [**src --- 项目核心代码目录（重点）**](#src — 项目核心代码目录（重点）)
    • • [① assets ------ 静态资源目录](#① assets —— 静态资源目录)
      • [② components ------ 公共组件目录](#② components —— 公共组件目录)
      • [③ App.vue ------ 根组件（整个项目的主组件）](#③ App.vue —— 根组件（整个项目的主组件）)
      • [④ main.js ------ 项目的入口文件](#④ main.js —— 项目的入口文件)
    • [**package.json ------ 项目配置与依赖管理**](#package.json —— 项目配置与依赖管理)
    • [**vue.config.js ------ Vue CLI 配置文件（可选但常用）**](#vue.config.js —— Vue CLI 配置文件（可选但常用）)
• 示例代码块
• • Python：读取静态资源目录示例
  • Matlab：检查目录结构示例
  • C：打印目录内容示例（简单版）
• 总结
• 参考文献

---

前言

在前后端分离开发模式中，前端工程通常需要依赖现代化构建工具。
Vue 脚手架（Vue CLI） 是最常用的前端项目初始化工具，它能快速创建一套完整、规范的 Vue 工程结构，让开发者专注业务逻辑，而不是重复搭建环境。

本篇文章将介绍：

• Vue 脚手架是什么
• 如何创建 Vue 工程
• 工程目录结构说明（重点）
• 各文件/目录的作用

适合初学 Vue 或准备进行前后端分离项目的同学。

---

定义概念 + 缩写

Vue CLI（Command Line Interface）

Vue 官方提供的脚手架工具，用命令自动构建项目结构、安装依赖、生成配置。

Node.js

运行脚手架和构建工程的 JavaScript 运行环境。

前端工程化

通过工具链实现模块化、构建优化、开发服务器、依赖管理等能力。

---

性质（为什么使用脚手架）

特性	说明
开箱即用	一条命令即可创建完整工程，不需要手动配置
工程规范化	目录结构统一、依赖管理清晰、代码可维护
热更新	开发时实时刷新页面
支持各种插件	Router、Vuex、Lint、TypeScript 等可自动集成
方便联调	配置代理解决跨域，适用于前后端分离项目

---

使用步骤

---

① 安装 Vue CLI（如未安装）

npm install -g @vue/cli

---

② 创建项目

vue create vue-demo-1

根据提示选择：

• Vue2 / Vue3
• Router
• Vuex
• ESLint
• Babel 等

即可生成完整项目。

---

③ 启动项目

cd vue-demo-1
npm run serve

默认访问：

http://localhost:8080/

---

工程结构讲解（重点）

下面是典型 Vue CLI 工程结构（与你截图一致）：

vue-demo-1/
│
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
│
├── .gitignore
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── README.md
└── vue.config.js

下面逐个说明👇

---

重点文件/目录

node_modules --- 当前项目依赖的 JS 包

所有 npm 包统一放在这个目录，项目体积很大正常，不需要手动修改。

---

public --- 静态资源根目录

内部文件不会被 Webpack 处理。

• index.html：项目入口 HTML 页面
• favicon.ico：浏览器图标

---

src --- 项目核心代码目录（重点）

① assets ------ 静态资源目录

如图片、字体、样式文件。

会被打包工具处理和优化。

② components ------ 公共组件目录

如导航栏、按钮组件、卡片组件等。

③ App.vue ------ 根组件（整个项目的主组件）

所有页面最终都挂载到 App.vue 内。

④ main.js ------ 项目的入口文件

Vue 实例从这里启动：

new Vue({
  render: h => h(App),
}).$mount('#app')

---

package.json ------ 项目配置与依赖管理

包含：

• 项目的基本信息（name、version）
• 依赖项（dependencies / devDependencies）
• 运行命令（scripts）

示例：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build"
}

---

vue.config.js ------ Vue CLI 配置文件（可选但常用）

用来：

• 配置反向代理（解决跨域问题）
• 修改打包路径
• 配置别名
• 定制 webpack 行为

示例（配置代理联调后端接口）：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

---

示例代码块

Python：读取静态资源目录示例

import os

assets = os.listdir('./src/assets')
print(assets)

---

Matlab：检查目录结构示例

files = dir('./src');
for i = 1:length(files)
    disp(files(i).name)
end

---

C：打印目录内容示例（简单版）

system("ls src");

---

总结

• Vue CLI 是前端工程化的重要工具，可快速搭建项目。
• 工程结构清晰，有助于团队协作（尤其是前后端分离项目）。
• src/ 是核心开发目录，而 vue.config.js 是联调后端接口必备配置。
• 理解每个目录用途后，开发效率会显著提高。

---

参考文献

1\] Vue CLI 官方文档 \[2\] 前端工程化最佳实践 \[3\] Webpack 构建原理

---