Vue CLI学习入门教程-原创手记-慕课网

概述

本文将指导你快速入门vue CLI学习，包括安装、创建和配置Vue项目的基本步骤。通过Vue CLI，你可以简化项目初始化和配置过程，享受快速开发的便利。文章详细介绍了Vue CLI的使用方法和常见命令，帮助你更好地理解和掌握vue CLI学习。

Vue CLI学习入门教程

1. Vue CLI简介

1.1 什么是Vue CLI

Vue CLI 是 Vue.js 官方提供的脚手架工具，全称为 Vue Command Line Interface。它是一个命令行工具，能够帮助开发者快速搭建 Vue 项目，并提供了一系列的预设配置和工具，以便开发者专注于编写高质量的代码，而不是花费大量时间配置开发环境。

1.2 Vue CLI的作用与好处

Vue CLI 的主要作用在于简化项目的初始化和配置过程。它通过预定义的模板和配置文件，帮助开发者快速创建一个 Vue 项目，包括配置 Webpack、Babel、ESLint 等工具。这些工具可以帮助开发者在项目中进行代码转译、代码检查和构建优化等工作。

使用 Vue CLI 的好处包括：

快速起步：Vue CLI 提供了多种预设模板，可以直接使用这些模板快速创建项目，而无需手动配置。
一致性：通过使用 Vue CLI 创建的项目，可以保证项目的基本结构和配置的一致性，避免因配置混乱而导致的问题。
灵活性：虽然预设了许多配置，但 Vue CLI 还提供了丰富的插件和扩展点，允许开发者根据项目需求进行自定义配置。
生态系统支持：Vue CLI 官方和社区提供了大量的插件和模板，可以方便地集成到项目中，扩展项目的功能。

2. 安装Vue CLI

2.1 安装Node.js

Vue CLI 是一个 Node.js 应用程序，因此，首先需要确保系统中已经安装了 Node.js。Node.js 是一个开源、跨平台的 JavaScript 运行环境，它允许在服务端运行 JavaScript 代码，不需要浏览器环境。访问 Node.js 官方网站，下载并安装最新版本的 Node.js。

安装 Node.js 后，可以通过命令行工具检查安装是否成功：

node -v

如果安装成功，会输出 Node.js 的版本号。同时，Node.js 附带了 npm（Node Package Manager，Node.js 的包管理工具），也可以通过命令行工具检查其版本：

npm -v

输出的版本号表示 npm 已经安装并可以正常使用。

2.2 全局安装Vue CLI

安装完 Node.js 之后，可以通过 npm 安装 Vue CLI。在命令行工具中输入以下命令进行安装：

npm install -g @vue/cli

-g 参数表示全局安装，这样可以在任何地方使用 vue 命令。安装完成后，可以通过命令行工具检查 Vue CLI 是否安装成功：

vue --version

如果安装成功，会输出 Vue CLI 的版本号。

3. 创建Vue项目

3.1 使用Vue CLI创建新项目

创建 Vue 项目的第一步是使用 Vue CLI 创建一个新的项目。在命令行工具中，导航到希望存放项目的目录，然后运行以下命令：

vue create my-project

my-project 是项目的名称，你可以根据项目的需求自定义名称。运行该命令后，Vue CLI 会询问你一些配置选项，例如选择预设配置或手动配置项目。

示例输出：

Vue CLI v4.5.13
? Please pick a preset (Use arrow keys)
  Default (babel, eslint)
  Manually select features
  ...

选择 Default (babel, eslint) 选项后，Vue CLI 会自动进行项目的初始化。初始化完成后，会提示项目创建成功，并给出一些后续的操作建议。

3.2 项目目录结构介绍

使用 Vue CLI 创建的项目具有一个标准化的目录结构，通常包括以下几个主要部分：

src：项目的主要代码目录，包括 Vue 组件、路由、状态管理等。
public：包含静态资源文件，如 HTML、图片、字体等。
node_modules：项目依赖的模块文件。
package.json：项目配置文件，包括依赖项、脚本等。
babel.config.js：Babel 配置文件，用于编译 ES6+ 代码。
eslintrc.js：ESLint 配置文件，用于代码检查。
vue.config.js：Vue CLI 项目配置文件，用于自定义构建和开发服务器设置。

示例目录结构：

my-project/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── eslintrc.js
├── package.json
├── package-lock.json
└── vue.config.js

4. 运行与调试Vue项目

4.1 启动开发服务器

使用 Vue CLI 创建的项目可以通过命令行工具启动一个开发服务器，方便开发者查看和调试网页。在命令行工具中导航到项目根目录，然后运行以下命令：

npm run serve

这会启动一个本地开发服务器，默认运行在 http://localhost:8080。在浏览器中打开上述链接，可以看到项目启动后的初始页面。

4.2 热重载和调试工具

Vue CLI 提供了热重载功能，当代码发生变化时，开发服务器会自动重新编译，并在浏览器中刷新页面。这使得开发者可以快速看到代码更改的效果，提高开发效率。此外，Vue CLI 还集成了许多调试工具，如 Vue Devtools，可以方便地查看组件树、状态管理等信息。

5. 常用命令与配置

5.1 常见Vue CLI命令

Vue CLI 提供了许多常用的命令，以下是几个常用的命令示例：

启动开发服务器：
```
npm run serve
```
当运行此命令后，开发服务器会启动并监听端口 8080，默认情况下，项目会在浏览器中打开 http://localhost:8080。
构建生产环境的代码：
```
npm run build
```
运行此命令后，Vue CLI 会将项目构建为生产环境，所有的资源文件会被优化并放置在 dist 目录中，以确保在生产环境中高效运行。
运行单元测试：
```
npm run test
```
这会运行项目中的单元测试，确保代码质量。
打开调试工具（注意：一般不推荐使用此命令）：
```
npm run eject
```
npm run eject 命令将所有配置从 Vue CLI 管理的配置中解出来，这意味着一旦运行此命令，你将无法再使用 Vue CLI 更新项目配置，因此一般不推荐使用此命令。

示例代码：

# 启动开发服务器
npm run serve

# 构建生产环境的代码
npm run build

# 运行单元测试
npm run test

5.2 配置项目文件

Vue CLI 生成的项目包含一些配置文件，可以通过修改这些文件来自定义项目的构建和开发环境。

package.json：
这个文件包含了项目的基本信息以及脚本配置。可以在 scripts 部分添加自定义的脚本命令，例如：
```
{
 "name": "my-project",
 "version": "1.0.0",
 "scripts": {
   "dev": "vue-cli-service serve",
   "build": "vue-cli-service build"
 }
}
```
vue.config.js：
在项目根目录下创建或修改 vue.config.js 文件，可以进行更详细的配置。例如，可以自定义项目输出路径、开启或关闭生产环境的压缩等：
```
module.exports = {
 outputDir: 'dist',
 productionSourceMap: false
};
```

示例代码：

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}

module.exports = {
  outputDir: 'dist',
  productionSourceMap: false
};

6. 模板与插件使用

6.1 使用预定义模板创建项目

Vue CLI 提供了许多预定义的模板，可以根据项目需求选择不同的模板。例如，可以使用 vue create 命令并指定模板名称：

vue create my-project --preset @vue/prettier

这会使用 @vue/prettier 模板创建项目，该模板集成了 Prettier 工具，用于代码格式化。

6.2 安装与使用常见插件

除了预定义的模板，Vue CLI 还允许开发者安装和使用各种插件，以扩展项目的功能。例如，可以使用 Vue CLI 插件 @vue/cli-plugin-pwa 来集成 PWA（Progressive Web App）功能：

vue add pwa

这会自动安装并配置 PWA 相关的依赖和配置文件。

示例代码：

vue create my-project --preset @vue/prettier

vue add pwa

通过以上步骤，你可以使用 Vue CLI 快速创建、配置和扩展 Vue 项目，提高开发效率。希望这个教程对你有所帮助！