Vue-01（Vue CLI创建项目以及文件配置说明）

了解 Vue CLI 及其功能

Vue CLI 是搭建、构建和管理 Vue.js 项目的标准工具。它通过提供一致的项目结构、处理复杂的构建配置以及通过插件提供一组丰富的功能来简化开发工作流程。了解 Vue CLI 对于任何 Vue.js 开发人员来说都至关重要，因为它可以显着提高生产力并确保遵循最佳实践。本课将全面概述 Vue CLI 及其功能，为你有效地创建和管理 Vue.js 项目做好准备。

Vue CLI 的核心概念

Vue CLI（命令行界面）不仅仅是一个项目生成器;它是一个完整的 Vue.js 应用程序开发生态系统。它抽象出 Webpack、Babel 和 PostCSS 等构建工具的复杂性，使开发人员能够专注于编写 Vue.js 代码。

项目初始化

Vue CLI 的主要功能是初始化新的 Vue.js 项目。它提供标准化的项目结构和配置，确保不同项目之间的一致性。

• 基本示例： 当你运行 vue create my-project 时，Vue CLI 会提示你选择一个预设。“default” 预设提供了 Babel 和 ESLint 的基本设置。
• 高级示例： 您还可以在项目创建过程中手动选择 Vue Router、Vuex、CSS 预处理器（Sass、Less、Stylus）、TypeScript 等功能。这使您可以根据自己的特定需求定制项目。

开发服务器

Vue CLI 包括一个具有热重载功能的内置开发服务器。这意味着，当您对代码进行更改时，浏览器会自动更新，而无需手动刷新。

• 基本示例： 创建项目后，您可以通过运行 npm run serve 或 yarn serve 来启动开发服务器。这通常会在 http://localhost:8080 上启动服务器。
• 高级示例： 您可以通过修改 vue.config.js 文件来自定义开发服务器的行为。例如，您可以更改端口、启用 HTTPS 或配置代理设置。

构建过程

Vue CLI 通过提供单个命令来编译用于生产的代码，从而简化了构建过程。它通过缩小代码、删除未使用的代码 （tree-shaking） 和生成优化的资产来优化您的代码。

• 基本示例： 要构建用于生产的项目，您可以运行 npm run build 或 yarn build。这将创建一个包含优化文件的 dist 目录。
• 高级示例： 您可以通过修改 vue.config.js 文件来自定义构建过程。例如，您可以配置代码切分、更改输出目录或添加自定义 Webpack 插件。

插件

Vue CLI 的插件系统允许您通过附加功能和集成来扩展其功能。插件可以添加对 TypeScript、CSS 预处理器、测试框架等的支持。

• 基本示例： 要安装插件，你可以使用 vue add 命令。例如， vue add @vue/cli-plugin-eslint 将 ESLint 添加到您的项目中。
• 高级示例： 您还可以创建自己的自定义插件来封装可重用的配置和逻辑。这样，您就可以在多个项目之间共享最佳实践并实施一致性。

Vue CLI 的主要特点

Vue CLI 提供了一系列功能，可以增强开发体验并提高项目的可维护性。

预设

预设是预配置的插件和设置集，可简化项目初始化。它们允许您快速创建具有通用配置的项目，而无需手动选择每个功能。

• 基本示例：“default” 预设包括 Babel 和 ESLint，为现代 JavaScript 开发提供基本设置。
• 高级示例： 您可以创建自己的自定义预设来封装您的首选配置并与您的团队共享。这确保了所有项目之间的一致性。

图形用户界面

Vue CLI 提供了一个图形用户界面 （GUI），允许你在不使用命令行的情况下管理项目、安装插件和配置设置。

• 基本示例： 要打开 GUI，您可以在项目目录中运行 vue ui。
• **高级示例：**GUI 允许您检查项目的依赖项、分析构建性能以及可视化项目的结构。

即时原型设计

Vue CLI 允许你快速构建 Vue.js 组件原型，而无需创建完整的项目。这对于试验新想法或测试不同的方法非常有用。

• 基本示例： 你可以创建一个 .vue 文件并运行 vue serve MyComponent.vue 在浏览器中快速预览它。
• 高级示例： 你也可以使用 vue build MyComponent.vue 来构建一个单文件组件，以便在其他项目中使用。

任务管理

Vue CLI 提供了一个任务管理系统，允许你定义和运行自定义任务。这对于自动执行常见开发任务（例如运行测试、检查代码或部署应用程序）非常有用。

• 基本示例： 您可以使用 scripts 属性在 package.json 文件中定义自定义任务。例如，您可以使用 npm test 定义一个任务来运行单元测试。
• 高级示例： 您可以使用 npm-run-all 等工具或并发运行多个任务，从而改进您的开发工作流程。

实际示例和演示

让我们来看看一些使用 Vue CLI 创建和管理 Vue.js 项目的实际示例。

创建新项目

1. 安装 Vue CLI： 如果你还没有，请使用 npm install -g @vue/cli 或 yarn global add @vue/cli 全局安装 Vue CLI。
2. 创建新项目： 运行 vue create my-new-project。
3. 选择预设： 选择 “Manually select features” 选项。
4. 选择功能： 选择 “Babel”、“Vue Router”、“Vuex”、“CSS Pre-processors”、“Linter / Formatter”。
5. 选择 CSS 预处理器： 选择 “Sass/SCSS （with dart-sass）”。
6. 选择 Linter / Formatter： 选择 “ESLint + Prettier”。
7. 选择其他 lint 功能： 选择 “Lint on save（保存时发现 lint）”。
8. 选择放置 Babel、ESLint 等配置的位置： 选择 “In dedicated config files”。
9. 为将来的项目保存预设？： 选择 “No”。
10. 导航到 Project Directory：cd my-new-project。
11. 运行开发服务器：npm run serve 或 yarn serve。

添加插件

1. 导航到您的项目目录：cd my-project。
2. 添加 TypeScript 插件： 运行 vue add @vue/cli-plugin-typescript .
3. 回答提示： Vue CLI 会问你一些关于如何配置 TypeScript 的问题。选择最适合您需求的选项。

自定义构建过程

1. 创建 vue.config.js： 如果您还没有，请在项目的根目录中创建一个 vue.config.js 文件。
2. 修改 vue.config.js 文件： 添加以下代码以自定义构建过程：

module.exports = {outputDir: 'dist', // Change the output directoryassetsDir: 'static', // Change the assets directoryfilenameHashing: false, // Disable filename hashingdevServer: {port: 8081, // Change the development server portproxy: {'/api': {target: 'http://localhost:3000', // Proxy requests to a backend serverchangeOrigin: true,pathRewrite: {'^/api': '' // Remove the /api prefix from the URL}}}},configureWebpack: {// Add custom Webpack configuration}
};

使用 Vue CLI 设置新的 Vue 项目

设置一个新的 Vue 项目是任何 Vue.js 开发过程中至关重要的第一步。Vue CLI（命令行界面）简化了这一过程，提供了一种标准化且高效的方法来构建具有最佳实践的项目。本课将指导你完成使用 Vue CLI 设置新 Vue 项目的过程，探索可用于根据你的特定需求定制项目的各种选项和配置。我们将深入研究不同的项目预设、包管理器和基本插件，它们可以增强您的开发工作流程。

使用 Vue CLI 创建新项目

Vue CLI 使用单个命令简化了项目创建：vue create <project-name>。此命令将启动交互式提示，允许您选择预设或手动选择功能。

交互式项目创建

1. 打开您的终端： 导航到要在其中创建项目的目录。

2. 运行 creation 命令： 执行 vue create my-vue-project（将 my-vue-project 替换为你想要的项目名称）。

3. **选择预设：**CLI 将为您提供几个选项：

   • 默认 （[Vue 3] babel， eslint）： 此选项提供了 Vue 3 的基本设置，用于转译的 Babel 和用于代码 linting 的 ESLint。
   • 默认 （[Vue 2] babel， eslint）： 与上述类似，但使用 Vue 2。由于你正在扩展自己的技能，因此建议专注于 Vue 3。
   • 手动选择特征： 这允许您通过选择 TypeScript、Router、Vuex、CSS Pre-processors、Linters 等特定功能来自定义您的项目。

手动特征选择

选择 “Manually select features” 可以对您的项目设置进行精细控制。让我们探索您可以选择的主要功能：

• TypeScript 中： 添加了对静态类型的 TypeScript 支持，并改进了代码可维护性。
• 路由器： 包括用于单页应用程序 （SPA） 导航的 Vue 路由器。
• Vuex 的： 集成 Vuex 以进行集中式状态管理，非常适合大型应用程序。
• CSS 预处理器： 允许使用 CSS 预处理器，如 Sass/SCSS、Less 或 Stylus。
• Linter / 格式化程序： 配置 linter （ESLint、Prettier） 以强制执行代码样式和格式。
• 单元测试： 使用 Jest 或 Mocha 设置单元测试环境。
• E2E 测试： 使用 Cypress 或 Nightwatch 配置端到端测试。

示例：使用 TypeScript、Router 和 Vuex 创建项目

让我们使用 TypeScript、Vue Router 和 Vuex 创建一个名为 advanced-vue-app 的项目。

1. 运行 vue create advanced-vue-app
2. 选择 “Manually select features”
3. 使用箭头键和空格键选择 “TypeScript”、“Router” 和 “Vuex”。如果您更喜欢使用 SCSS 或其他预处理器，您还可以选择“CSS 预处理器”。
4. 选择 Vue 版本（建议使用 Vue 3）。
5. 回答有关类样式组件语法、单独配置文件以及是否保存预设以备将来使用的后续提示。

Package Manager 选择

在项目创建过程中，Vue CLI 会要求你选择一个包管理器：

• npm： Node.js 的默认包管理器。
• yarn： npm 的更快替代品。
• pnpm： 一个更高效的包管理器，可节省磁盘空间。

虽然 npm 被广泛使用，但 yarn 和 pnpm 提供了性能改进。考虑将 yarn 或 pnpm 用于具有许多依赖项的大型项目。

在 GUI 中创建项目

Vue CLI 还为项目管理提供了图形用户界面 （GUI）。要访问 GUI，请在终端中运行 vue ui。这将打开一个浏览器窗口，你可以在其中创建、管理和配置你的 Vue 项目。GUI 提供了一种可视化的方式来选择功能、安装插件和运行任务。

项目结构和关键文件

创建项目后，让我们检查一下基本的项目结构：

my-vue-project/
├── node_modules/          # 项目依赖包目录（由 npm/yarn 安装，存放所有依赖库）
├── public/                # 公共静态资源目录（不会被 Webpack 处理）
│   └── index.html         # 应用在浏览器中的入口 HTML 文件，Vue 会挂载到其中的 <div id="app">
├── src/                   # 源代码目录（所有开发相关代码都放这里）
│   ├── assets/            # 静态资源，如图片、字体等
│   ├── components/        # Vue 组件目录（可复用 UI 单元）
│   ├── router/            # Vue Router 配置目录（如果项目选择了路由功能）
│   │   └── index.ts       # 路由配置文件，定义页面路径与组件的对应关系
│   ├── store/             # Vuex 状态管理配置目录（如果项目使用了 Vuex）
│   │   └── index.ts       # Vuex 配置文件，定义全局状态和 mutations/actions
│   ├── App.vue            # 应用的根组件（所有子组件的容器）
│   └── main.ts            # 应用程序的入口文件，Vue 实例在这里被创建并挂载到 DOM 上
├── .gitignore             # Git 忽略配置文件（列出不应提交到版本库的文件或文件夹）
├── babel.config.js        # Babel 转译配置文件，用于将新语法转换为兼容旧浏览器的代码
├── package.json           # 项目的元数据文件，包括项目名称、依赖、脚本命令等
├── README.md              # 项目说明文档，常用于描述项目用途、安装方法、使用指南等
├── vue.config.js          #（可选）：此文件允许你自定义 Vue CLI 配置
└── tsconfig.json          # TypeScript 配置文件，定义 TS 编译规则（若项目启用了 TypeScript）

关键文件解释

• package.json： 此文件包含基本的项目元数据，包括依赖项、脚本和项目名称。它是项目依赖项管理的核心。
• src/main.ts： 这是应用程序的入口点。它初始化 Vue 实例并将其挂载到 DOM 上。
• src/App.vue ： 这是应用程序的根组件。它通常包含应用程序的主要布局和结构。
• public/index.html： 这是用作浏览器中应用程序入口点的主 HTML 文件。
• vue.config.js： （可选）：此文件允许你自定义 Vue CLI 配置，例如修改 webpack 设置或添加自定义插件。
• tsconfig.json（如果选择了 TypeScript）： 此文件为您的项目配置 TypeScript 编译器选项。
• babel.config.js： 文件配置 Babel，用于将 JavaScript 代码转换为与旧浏览器兼容的版本。

了解 package.json

package.json 文件对于管理项目的依赖项和脚本至关重要。以下是其关键部分的细分：

• name ： 项目的名称。
• version ： 项目的当前版本。
• dependencies: 生产依赖项及其版本的列表。
• devDependencies ： 开发依赖项（例如，测试库、Linter）及其版本的列表。
• scripts： 可以使用 npm run <script-name> 或 yarn <script-name> 执行的一组命令。常见脚本包括
  • serve（用于开发）
  • build（用于生产）
  • test：unit（用于运行测试）。
  • lint：运行代码 linting。

例：

{"name": "advanced-vue-app","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","test:unit": "vue-cli-service test:unit","lint": "vue-cli-service lint"},"dependencies": {"core-js": "^3.6.5","vue": "^3.0.0","vue-router": "^4.0.0","vuex": "^4.0.0"},"devDependencies": {"@types/jest": "^24.0.19","@typescript-eslint/eslint-plugin": "^4.18.0","@typescript-eslint/parser": "^4.18.0","@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-eslint": "~4.5.0","@vue/cli-plugin-router": "~4.5.0","@vue/cli-plugin-typescript": "~4.5.0","@vue/cli-plugin-unit-jest": "~4.5.0","@vue/cli-plugin-vuex": "~4.5.0","@vue/cli-service": "~4.5.0","@vue/compiler-sfc": "^3.0.0","@vue/eslint-config-typescript": "^7.0.0","@vue/test-utils": "^2.0.0-0","eslint": "^6.7.2","eslint-plugin-vue": "^7.0.0","typescript": "~4.1.5"}
}

babel.config.js

babel.config.js 文件配置 Babel，用于将 JavaScript 代码转换为与旧浏览器兼容的版本。

• presets：此部分指定要使用的 Babel 预设。预设是针对特定环境或语言功能配置 Babel 的插件集合。最常见的预设是 @vue/cli-plugin-babel/preset，它包括为 Vue 应用程序转译现代 JavaScript 代码所需的插件。

例：

module.exports = {presets: ['@vue/cli-plugin-babel/preset']
}

vue.config.js

vue.config.js 文件是 Vue CLI 的主要配置文件。它允许您自定义项目构建过程的各个方面。

• publicPath：指定应用程序的基 URL。在将应用程序部署到 Web 服务器上的子目录时使用。
• outputDir：指定将放置构建文件的目录。默认值为 dist。
• assetsDir：指定放置静态资源的目录。默认值为 ''。
• devServer：此部分配置开发服务器。您可以指定端口号、代理设置和热重载行为等选项。
• configureWebpack：此选项允许您直接配置底层 webpack 配置。这对于高级自定义非常有用。
• chainWebpack：此选项提供了一种更灵活的方式来使用可链接的 API 来修改 webpack 配置。
• css：此部分配置 CSS 相关选项，例如 CSS 模块和预处理器。

例：

module.exports = {publicPath: '/',outputDir: 'dist',assetsDir: 'static',devServer: {port: 8080,proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true}}},configureWebpack: {// Custom webpack configuration},chainWebpack: config => {// Modify webpack configuration using chainable API}
}

配置 vue.config.js

vue.config.js 文件提供了广泛的配置选项，可以根据您的特定需求定制您的 Vue CLI 项目。让我们探索一些常见的配置场景。

更改输出目录

默认情况下，Vue CLI 将构建的文件放在 dist 目录中。您可以使用 outputDir 选项更改此设置。

module.exports = {outputDir: 'build'
}

这会将构建的文件放在 build 目录而不是 dist 中。

设置代理

在开发过程中，您可能需要访问在不同域上运行的 API。您可以使用 devServer 部分中的 proxy 选项来设置代理。

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

这会将所有对 /api 的请求代理到 http://localhost:3000。changeOrigin 选项对于处理 CORS 问题非常重要。

修改 Webpack 配置

对于更高级的自定义，您可以使用 configureWebpack 或 chainWebpack 选项直接修改底层 webpack 配置。

• configureWebpack：此选项允许您提供 webpack 配置对象或修改现有配置的函数。

module.exports = {configureWebpack: {resolve: {alias: {'@': '/src'}}}
}

这将创建一个指向 src 目录的别名 @，允许你使用 @/components/MyComponent.vue 导入模块。

• chainWebpack：此选项提供了一种更灵活的方式来使用可链接的 API 来修改 webpack 配置。这对于修改配置的特定部分而不必覆盖整个对象非常有用。

module.exports = {chainWebpack: config => {config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {// modify the options...return options})}
}

这个例子展示了如何修改传递给 vue-loader 的选项。

运行开发服务器

要启动开发服务器，请在终端中导航到您的项目目录并运行 npm run serve 或 yarn serve（取决于您选择的包管理器）。这将编译您的代码并启动本地开发服务器，通常为 http://localhost:8080。由于热重载，您对代码所做的任何更改都将自动反映在浏览器中。

自定义项目设置

Vue CLI 提供了多种方法来自定义初始功能选择之外的项目设置。

查看 CLI 插件

Vue CLI 插件是扩展 Vue CLI 功能的 npm 包。他们可以添加新命令、修改构建过程或提供其他功能。你可以使用 vue add <plugin-name> 命令来安装插件。

示例：为 Vuex 添加 Vue CLI 插件。

vue add vuex

此命令将安装 Vuex 插件并自动配置您的项目以使用 Vuex。

环境变量

Vue CLI 支持不同环境（例如，开发、生产）的环境变量。您可以在 .env 文件中定义环境变量。

• .env：默认环境变量
• .env.development：开发模式的环境变量
• .env.production：生产模式的环境变量

环境变量可在您的代码中使用 process.env 访问。

例：

// .env.development
VUE_APP_API_URL=http://localhost:3000/api

<template><div>API URL: {{ apiUrl }}</div>
</template><script>
export default {computed: {apiUrl() {return process.env.VUE_APP_API_URL;}}
};
</script>