使用 vue-cli 4.0 创建开发环境

Vue CLI 是官方提供的一个脚手架工具，用于快速搭建 Vue 项目的开发环境。它简化了 Vue 项目的配置和构建过程，帮助开发者快速进入开发状态。在本课件中，我们将详细介绍如何使用 Vue CLI 4.0 创建开发环境，并进行基础配置和项目启动。

1. Vue CLI 4.0 简介

Vue CLI 是 Vue.js 的官方命令行工具，提供了一套完整的构建工具、脚手架以及插件系统。Vue CLI 4.0 引入了一些新的特性，例如对 webpack 4 的优化、插件化的架构等，使得开发者可以更加高效地构建和开发 Vue 应用。

1.1 Vue CLI 的核心特性

项目生成器：使用命令行快速生成 Vue 项目结构。
插件化架构：支持插件的安装和管理，可以根据项目需要动态引入不同的插件。
热重载：在开发过程中支持热重载，自动刷新页面。
配置优化：通过 webpack 和 Babel 的配置优化，提升构建效率。
UI 界面：通过 vue ui 命令启动图形化界面，便于配置和管理项目。

2. 安装 Vue CLI 4.0

2.1 全局安装 Vue CLI

要使用 Vue CLI 4.0，首先需要全局安装 Vue CLI。打开终端并运行以下命令：

npm install -g @vue/cli

安装完成后，使用以下命令检查 Vue CLI 版本：

vue --version

确保显示的版本是 4.x 或更高版本。

2.2 通过 vue-cli 创建 Vue 项目

使用 Vue CLI 创建一个新项目非常简单。执行以下命令：

vue create my-project

在执行此命令时，CLI 会提示你选择一个预设配置。可以选择默认配置（默认会集成一些基础的配置，如 Babel、ESLint 等），也可以手动选择配置项。

选择配置后，CLI 会自动安装依赖并初始化项目结构。

3. Vue 项目结构

创建项目后，项目目录结构如下：

my-project/
├── node_modules/    // 项目依赖
├── public/          // 公共文件夹，存放静态资源
│   └── index.html   // 应用的 HTML 模板文件
├── src/             // 源代码目录
│   ├── assets/      // 静态资源
│   ├── components/  // Vue 组件
│   ├── views/       // 页面视图
│   ├── App.vue      // 根组件
│   └── main.js      // 入口文件
├── .gitignore       // Git 忽略文件
├── package.json     // 项目配置信息和依赖管理
└── README.md        // 项目说明文件

3.1 src 目录：包含了项目的所有源代码，最重要的是 `main.js` 入口文件和 `App.vue` 根组件。组件和页面都可以存放在 `components` 和 `views` 文件夹下。

3.2 public 目录：存放公共资源文件，如 `index.html` 模板文件。此文件会在构建时被注入到项目中。

4. 启动开发环境

在创建好项目之后，进入项目目录并安装依赖：

cd my-project
npm install

安装完成后，使用以下命令启动开发服务器：

npm run serve

开发服务器启动后，浏览器会自动打开并加载项目，默认地址是 http://localhost:8080。

5. 配置 Vue CLI 项目

5.1 修改 `vue.config.js` 配置文件

Vue CLI 允许在项目根目录下创建 vue.config.js 文件进行项目配置。例如，配置代理来解决跨域问题：

代码案例：

// vue.config.js
module.exports = {
  devServer: {
    proxy: 'http://localhost:3000'
  }
};

中文注释解释：

该配置项允许将开发服务器的请求代理到 http://localhost:3000，解决了前端与后端接口的跨域问题。

5.2 配置路径别名

为了方便管理导入路径，Vue CLI 允许设置路径别名。通过修改 vue.config.js 文件中的 chainWebpack 配置，可以设置路径别名。

代码案例：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('@assets', './src/assets')
      .set('@components', './src/components');
  }
};

中文注释解释：