Vue CLI教程：新手入门指南

本文提供了详细的vue CLI教程，帮助新手快速入门并掌握如何使用vue CLI创建、配置和构建Vue项目。文章详细介绍了vue CLI的安装、项目创建、开发和部署过程，并给出了丰富的配置选项和示例。通过本文，读者可以全面了解vue CLI的强大功能和使用方法。

Vue CLI 是 Vue.js 的官方脚手架工具，它提供了一套标准化的项目结构和构建工具，帮助开发者快速搭建 Vue 项目。Vue CLI 能自动生成 Vue 项目的目录结构，引入必要的依赖库，并且可以配置各种构建工具和配置选项，使开发者能够专注于编写 Vue 应用的核心业务逻辑。

Vue CLI的作用和优势

Vue CLI 的作用主要是简化了创建 Vue 项目的流程，并且提供了丰富的配置选项，使得构建 Vue 应用更加标准化和高效。它的优势体现在以下几个方面：

1. 快速创建项目：通过简单的命令，可以快速创建新的 Vue 项目。
2. 标准化项目结构：提供了一套标准的项目目录结构和文件命名约定，便于团队协作。
3. 丰富的插件支持：可以安装各种插件，支持单元测试、代码热重载、代码压缩等功能。
4. 灵活的配置选项：可以根据项目需求配置构建工具、模板等，满足各种复杂场景。
5. 统一的构建流程：通过 Vue CLI，可以确保不同项目之间构建流程的统一性和一致性。

例如，使用以下命令可以创建一个新的 Vue 项目：

vue create my-project

运行此命令后，Vue CLI 将会提示选择预设配置或自定义配置，选择完成后，将自动生成项目文件和目录结构。

安装Node.js

在安装 Vue CLI 之前，需要先安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，可以用来构建服务器端和客户端应用。Vue CLI 是一个 Node.js 包，因此需要先安装 Node.js。

1. 访问 Node.js 官方网站（https://nodejs.org/）。
2. 根据操作系统选择对应的安装包进行下载。
3. 安装完成后，可以通过命令行验证安装是否成功：

node -v
npm -v

这两条命令分别用于检查 Node.js 和 npm 的版本信息。如果安装成功，应该会显示相应的版本号。

安装Vue CLI

安装完 Node.js 后，可以使用 npm 全局安装 Vue CLI。具体步骤如下：

1. 打开命令行工具。
2. 运行以下命令来全局安装 Vue CLI：

```sh blackout
npm install -g @vue/cli

3. 安装完成后，可以通过以下命令验证 Vue CLI 是否安装成功：

```sh
vue --version

如果成功安装，应该会显示 Vue CLI 的版本信息。

使用Vue CLI创建项目

创建 Vue 项目的步骤如下：

1. 打开命令行工具。
2. 使用 vue create 命令创建一个新的 Vue 项目。例如：

vue create my-project

这会创建一个名为 my-project 的新项目。

1. 按照命令行提示选择项目配置选项。可以选择默认配置，或自定义配置，例如选择预装的插件。

项目结构介绍

创建项目后，会生成一个标准的 Vue 项目结构。下面是一个典型的 Vue 项目结构：

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

• node_modules: 包含项目依赖的第三方库。
• public: 项目公共资源文件，例如 index.html 和 favicon.ico。
• src: 存放 Vue 应用的源代码。
  • assets: 存放静态资源文件，例如图片和字体文件。
  • components: 存放自定义的 Vue 组件。
  • App.vue: 应用的根组件。
  • main.js: 应用的入口文件。
• .gitignore: git 版本控制忽略文件。
• babel.config.js: Babel 配置文件。
• package.json: 包管理器配置文件，包含项目依赖和脚本命令。
• README.md: 项目说明文档。
• vue.config.js: Vue CLI 配置文件。

例如，main.js 文件是一个简单的应用入口文件：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

启动开发服务器

启动 Vue 项目的开发服务器，可以在开发环境中实时查看应用的变化。具体步骤如下：

1. 打开命令行工具。
2. 进入项目目录：

cd my-project

1. 启动开发服务器：

npm run serve

这会启动一个本地开发服务器，并自动打开浏览器窗口，展示应用的状态。默认情况下，开发服务器会运行在 http://localhost:8080。

package.json 文件中，serve 脚本用于启动开发服务器：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    ...
  }
}

热重载的概念

热重载（Hot Reloading）是 Vue CLI 提供的一个功能，可以在开发过程中实时更新代码，而无需手动刷新浏览器。这有利于提高开发效率。

热重载通过以下方式实现：

1. JavaScript 代码的热重载：当 JavaScript 文件发生变化时，Vue CLI 会自动重新编译代码，并将更新后的代码注入到当前页面，而不需要重新加载整个页面。
2. CSS 代码的热重载：当 CSS 文件发生变化时，Vue CLI 会自动重新加载样式，而不需要刷新页面。

例如，要配置热重载，可以在 vue.config.js 文件中添加以下配置：

module.exports = {
  devServer: {
    hot: true
  }
}

热重载大大提升了开发体验，特别是在频繁修改代码时，可以即时看到修改的效果。

常用的Vue CLI命令

以下是一些常用的 Vue CLI 命令：

1. 启动开发服务器：

npm run serve

启动本地开发服务器，实时查看应用效果。

1. 构建项目：

npm run build

构建生产环境下的应用，生成的静态文件会放在 dist 目录下。

1. 运行单元测试：

npm run test

运行单元测试，检查应用的代码质量。

1. 运行 E2E 测试：

npm run e2e

运行端到端（E2E）测试，模拟用户行为进行测试。

1. 启动 Lint 服务：

npm run lint

启动代码风格检查，确保代码符合规范。

配置项目

Vue CLI 提供了 vue.config.js 配置文件，可以用来配置项目的构建选项。以下是一些常用的配置项：

1. 修改输出目录：

module.exports = {
  outputDir: 'my-output-dir'
};

指定构建输出的目录，默认为 dist。

1. 修改静态资源目录：

module.exports = {
  assetsDir: 'static'
};

指定静态资源文件的目录，默认为 static。

1. 配置代理服务器：

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

配置开发服务器的代理服务器，用于处理跨域请求。

1. 配置文件别名：

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('common', '@/common');
  }
};

配置文件别名，便于导入文件。

1. 修改公共路径：

module.exports = {
  publicPath: '/sub-folder/'
};

设置构建应用时的基础路径，默认为 /。

例如，要配置构建输出的目录为 build，可以在 vue.config.js 中进行如下修改：

module.exports = {
  outputDir: 'build'
};

构建项目

构建 Vue 项目的步骤如下：

1. 打开命令行工具。
2. 进入项目目录：

cd my-project

1. 运行构建命令：

npm run build

这会生成构建输出的目录，默认为 dist。

构建完成后，可以在 dist 目录中找到生成的静态文件，这些文件可以直接部署到静态文件服务器上。

例如，构建完成后，dist 目录的结构如下：

dist/
├── index.html
├── assets/
│   └── favicon.ico
└── css/
    └── app.css

部署到不同平台

部署 Vue 项目到不同平台的方法如下：

1. 部署到 GitHub Pages：

vue-cli-service build
cd dist
npm install --save gh-pages
npm run deploy

这会使用 gh-pages 插件将构建的文件部署到 GitHub Pages。

1. 部署到 Netlify：

npm run build

构建完成后，上传构建文件到 Netlify 平台，Netlify 会自动部署应用。

1. 部署到 Vercel：

npm run build

构建完成后，上传构建文件到 Vercel 平台，Vercel 会自动部署应用。

1. 部署到阿里云：

npm run build

构建完成后，将构建文件上传到阿里云服务器，可以通过 Nginx 或 Apache 配置静态文件服务器。

1. 部署到腾讯云：

npm run build

构建完成后，将构建文件上传到腾讯云服务器，可以通过 Nginx 或 Apache 配置静态文件服务器。

例如，要部署到 Netlify，可以按照以下步骤进行：

1. 上传构建文件到 Netlify 平台。
2. Netlify 会自动部署应用，并提供部署后的 URL。

这些部署方法可以帮助开发者将 Vue 项目部署到不同的平台，适用于不同的应用场景。