Vue2 项目目录说明与配置

本文档旨在详细说明 Vue2 项目的目录结构及其各个文件和文件夹的作用，以及一些项目的基本配置。通过了解这些内容，我们将能够更好地管理和维护 Vue2 项目。

一、目录说明

node_modules

• 描述: 项目依赖文件夹，包含所有通过 npm 或 yarn 安装的第三方库和依赖。
• 注意: 该文件夹通常不需要手动修改，且不应提交到版本控制系统（如 Git）中。

public

• 描述: 用于放置静态资源，如图片、字体等。放置在 public 文件夹中的资源在 Webpack 打包时会原封不动地复制到 dist 文件夹中。
• 示例文件:
  • favicon.ico: 网站的图标文件。
  • index.html: 项目的入口 HTML 文件。

src

• 描述: 程序员源代码文件夹，包含项目的核心代码和资源。
• 子文件夹和文件:
  • assets: 用于放置静态资源，如图片、样式表等。与 public 文件夹不同，assets 中的资源在打包时会被 Webpack 处理并打包到 JS 文件中。
  • components: 用于放置非路由组件（全局组件）。这些组件可以在多个地方重复使用。
  • App.vue: 项目的根组件，所有其他组件都会嵌套在该组件中。
  • main.js: 项目的入口文件，是整个程序最先执行的文件。它负责初始化 Vue 实例并挂载到 DOM 中。

配置文件

• 描述: 项目的配置文件，用于配置构建工具、编译器和其他工具。
• 文件:
  • .gitignore: 指定哪些文件或文件夹不应被 Git 版本控制系统跟踪。
  • babel.config.js: Babel 的配置文件，用于转换 JavaScript 代码。
  • jsconfig.json: JavaScript 项目的配置文件，用于配置路径别名和其他选项。
  • package.json: 项目的元数据文件，包含项目依赖、脚本命令等信息。
  • package-lock.json: 锁定依赖版本的文件，确保在不同环境中安装相同版本的依赖。
  • vue.config.js: Vue 项目的配置文件，用于自定义 Webpack 配置和其他 Vue CLI 选项。

二、项目脚本命令

• 描述: 在 package.json 中定义的脚本命令，用于执行常见的开发任务。
• 常用命令:
  • npm run serve: 启动开发服务器，支持热重载。
  • npm run build: 编译和压缩项目代码，生成生产环境的 dist 文件夹。
  • npm run lint: 检查和修复代码中的格式问题。

三、其他配置

1. 自动打开浏览器

启动项目时，默认是无法自动打开浏览器的，通过修改 package.json 文件中的 scirpts 属性，可以使项目运行时自动打开浏览器进入项目页面：

{  
  "scripts": {  
    "serve": "vue-cli-service serve --open",  // 添加上 --open即可
    "build": "vue-cli-service build",  
    "lint": "vue-cli-service lint"  
  }
}

2. 关闭 EsLint 校验

可以通过修改 vue.config.js 文件：

1. 打开项目根目录下的 `vue.config.js` 文件。
2. 如果没有该文件，可以手动创建一个。
3. 在文件中添加或修改以下配置：

module.exports = {
  lintOnSave: false
}

• lintOnSave: false: 这个配置项会关闭开发服务器启动时的 ESLint 校验。

3. src 文件夹别名

在 Vue 项目中，配置 src 文件夹的别名可以简化模块导入路径，使代码更加简洁和易读。以下是配置步骤：

1. 修改 vue.config.js

在项目根目录下的 vue.config.js 文件中，添加以下配置：

const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
};

• @: 这是常用的别名，代表 src 文件夹。
• path.resolve(__dirname, 'src'): 解析 src 文件夹的绝对路径。

2. 修改 jsconfig.json 或 tsconfig.json

在 jsconfig.json 文件中，添加以下配置以支持路径智能提示：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

• baseUrl: 设置基础路径为项目根目录。
• paths: 配置路径别名，@/* 指向 src/*。

3. 使用别名导入模块

配置完成后，可以在项目中通过别名导入模块。例如：

import HelloWorld from '@/components/HelloWorld.vue';

• @/components/HelloWorld.vue: 使用别名 @ 代替 src，使路径更加简洁。

4. 注意事项

在 Vue 项目中，配置路径别名时需要注意以下几点：

1. vue.config.js:

   • 必须修改，用于配置 Webpack 的路径别名，确保项目在运行和打包时能正确解析别名路径。
   • 如果不修改，项目在运行或打包时会报错，提示找不到模块。

2. jsconfig.json:

   • 可选修改，用于为开发工具（如 VS Code）提供路径别名的智能提示和跳转支持。
   • 如果不修改，开发工具将无法识别别名路径，但项目仍可正常运行。

因此建议同时修改两个文件，确保路径别名在运行、打包和开发体验中都能正常工作。