Vue 工程化项目文件详解：新手入门指南

上一篇给大家讲了Vue的安装全过程，成功安装后你会发现有许多不认识的文件，下面我们就来认识一下这些文件。

目录结构概览

一个典型的 Vue 工程化项目，其目录结构大致如下：

my-vue-project/
├── node_modules/ # 项目依赖包，npm install 或 yarn install 安装的模块
├── public/ # 静态资源目录，不会被 webpack 处理
│ ├── index.html # 项目入口 HTML 文件
│ └── favicon.ico # 网站图标
├── src/ # 源代码目录
│ ├── assets/ # 资源文件，例如图片、样式等
│ ├── components/ # 组件目录，存放可复用的 Vue 组件
│ ├── views/ # 视图组件目录，存放路由页面组件
│ ├── router/ # 路由配置目录
│ ├── store/ # Vuex 状态管理目录 (如果安装了 Vuex)
│ ├── App.vue # 根组件
│ └── main.js # 项目入口 JS 文件
├── .gitignore # git 忽略配置文件
├── babel.config.js # Babel 配置文件
├── package.json # 项目描述文件，包含依赖、脚本等信息
├── README.md # 项目说明文档
└── vue.config.js # Vue 项目配置文件 (可选)

核心文件详解

接下来，我们逐个详细了解这些核心文件和目录的作用：

node_modules/

• 作用: 这个目录存放的是项目的所有依赖包，都是通过 npm install 或 yarn install 命令安装的。
• 新手须知: 初学者无需手动修改这个目录下的任何文件。当您需要添加或更新项目依赖时，可以通过 npm install <package-name> 或 yarn add <package-name> 命令来管理。通常情况下，这个目录会被添加到 .gitignore 文件中，不会被提交到代码仓库。

public/

• 作用: public 目录存放的是静态资源文件，这些文件在打包时会被直接复制到最终的 dist 目录中，不会经过 webpack 的处理。
• 常见文件:
  • index.html: 这是项目的入口 HTML 文件，Vue 应用会挂载到这个文件中。
  • favicon.ico: 网站的图标，显示在浏览器标签页上。
• 新手须知: 通常情况下，我们不会经常修改 public 目录下的文件。如果您需要添加一些不希望被 webpack 处理的静态资源，例如第三方库的 CDN 链接，或者一些不经常变动的图片等，可以放在这个目录下。

src/ (源代码目录)

src 目录是整个项目的核心，我们大部分的开发工作都会在这个目录下进行。

• assets/:
  • 作用: 存放项目使用的资源文件，例如图片、字体、全局样式等。
  • 新手须知: assets 目录下的资源会被 webpack 处理，例如图片会被优化，样式可以被预处理器处理。您可以将项目中通用的图片、logo、基础样式文件放在这里。
  • 例如: 您可以将项目 logo 图片 logo.png 放在这里，然后在组件中通过相对路径引用 src/assets/logo.png。
• components/:
  • 作用: 存放可复用的 Vue 组件。组件是 Vue.js 的核心概念，它可以将页面拆分成独立的、可复用的部分。
  • 新手须知: 您应该将项目中可复用的 UI 组件，例如按钮、弹窗、导航栏等，放在这个目录下。每个组件通常是一个 .vue 文件。
  • 例如: 您可以创建一个 Button.vue 组件，然后在多个页面或组件中复用这个按钮组件。
• views/:
  • 作用: 存放视图组件，通常也称为页面组件或路由组件。这些组件对应着应用的不同页面或视图。
  • 新手须知: 每个 .vue 文件通常代表一个独立的页面。如果您使用了 Vue Router，那么 views 目录下的组件通常会配置为路由的页面组件。
  • 例如: 您可以创建 Home.vue (首页), About.vue (关于我们页), ProductList.vue (产品列表页) 等视图组件。
• router/:
  • 作用: 存放 Vue Router 的配置文件，用于配置应用的路由规则。
  • 常见文件: 通常会有一个 index.js 文件，用于配置路由。
  • 新手须知: 如果您在创建项目时选择了 Router 功能，Vue CLI 会自动创建这个目录和配置文件。您可以在 router/index.js 中定义应用的路由路径、组件映射、路由模式等。
• store/:
  • 作用: 如果项目使用了 Vuex 进行状态管理，这个目录用于存放 Vuex 的相关文件，例如 state, mutations, actions, modules 等。
  • 常见文件: 通常会有一个 index.js 文件，用于配置 Vuex store。也可能会有 modules 子目录，用于模块化管理 store。
  • 新手须知: Vuex 是 Vue.js 的状态管理库，适用于中大型应用。如果您在创建项目时选择了 Vuex，Vue CLI 会自动创建这个目录和配置文件。对于小型项目，可能不需要 Vuex。
• App.vue:
  • 作用: 根组件。它是整个 Vue 应用的入口组件，所有其他组件都嵌套在 App.vue 组件中。
  • 新手须知: App.vue 通常用于放置应用的全局布局、根级别的样式或逻辑。
• main.js:
  • 作用: 项目入口 JavaScript 文件。Vue 应用的启动和初始化都在这个文件中进行。
  • 新手须知: main.js 主要完成以下任务：
    • 引入 Vue 核心库。
    • 引入根组件 App.vue。
    • 创建 Vue 实例，并将 App.vue 渲染到 index.html 的指定元素上。
    • 配置和使用插件，例如 Vue Router, Vuex 等。

.gitignore

• 作用: Git 版本控制的忽略配置文件。用于指定哪些文件或目录不被 Git 跟踪和提交。
• 新手须知: .gitignore 文件中通常会包含 node_modules/、dist/ 等目录，以及一些临时文件或日志文件。您可以根据需要修改这个文件。

babel.config.js

• 作用: Babel 的配置文件。Babel 是一个 JavaScript 编译器，用于将 ES6+ 代码转换为向后兼容的 JavaScript 代码，以便在旧版本的浏览器中运行。
• 新手须知: 通常情况下，您不需要手动修改 babel.config.js 文件。Vue CLI 已经为您配置好了 Babel，以支持最新的 JavaScript 语法。

package.json

• 作用: 项目描述文件。包含了项目的名称、版本、作者、依赖、脚本等信息。
• 重要信息:
  • dependencies: 生产环境依赖，即项目运行时需要的依赖包。
  • devDependencies: 开发环境依赖，即项目开发和构建时需要的依赖包，例如 webpack, Babel, ESLint 等。
  • scripts: 脚本命令，例如 npm run serve (启动开发服务器), npm run build (项目打包) 等。
• 新手须知: package.json 是非常重要的文件，您可以通过 npm install 或 yarn install 命令根据 package.json 文件中的依赖信息安装项目所需的所有依赖包。

README.md

• 作用: 项目说明文档。用于描述项目的功能、安装步骤、使用方法、开发规范等信息。
• 新手须知: 良好的 README.md 文件可以帮助其他开发者快速了解您的项目。建议您认真编写 README.md 文件。

vue.config.js (可选)

• 作用: Vue 项目的配置文件。如果您需要对 Vue CLI 的默认配置进行更细粒度的调整，可以创建 vue.config.js 文件。
• 新手须知: vue.config.js 是可选的。如果您不需要自定义 webpack 配置、开发服务器配置等，可以不创建这个文件。如果需要进行高级配置，可以参考 Vue CLI 的官方文档。

如何开始你的开发

了解了项目的文件结构后，您就可以开始 Vue 项目的开发了。以下是一些建议：

1. 启动开发服务器: 在项目根目录下，运行 npm run serve 或 yarn serve 命令启动开发服务器。Vue CLI 会启动一个本地服务器，并在浏览器中打开您的应用。
2. 修改组件: 在 src/components/ 或 src/views/ 目录下创建或修改 .vue 文件，编写您的组件代码。
3. 配置路由: 如果需要配置路由，请修改 src/router/index.js 文件。
4. 添加资源: 将项目需要的图片、样式等资源文件放在 src/assets/ 目录下。
5. 构建项目: 当开发完成后，运行 npm run build 或 yarn build 命令构建项目。构建后的文件会输出到 dist/ 目录，您可以将 dist/ 目录下的文件部署到服务器上。

总结

本文详细介绍了 Vue 工程化项目的基本文件结构，并对每个核心文件和目录进行了详细的解释。希望通过本文的介绍，Vue.js 的新手能够对 Vue 项目的文件结构有一个清晰的认识，并能够更好地开始 Vue.js 的学习和项目开发。掌握项目的文件结构是 Vue 工程化开发的第一步，也是非常重要的一步。祝您在 Vue.js 的学习之旅中取得成功！