如何构建vue-cli工程

发布时间：2022-07-26 10:05:08 作者：iii
来源：亿速云阅读：113

如何构建Vue-CLI工程

Vue.js 是一个流行的前端框架，而 Vue-CLI 是 Vue.js 官方提供的脚手架工具，用于快速搭建 Vue.js 项目。Vue-CLI 提供了丰富的功能和插件，使得开发者能够轻松地创建、管理和构建 Vue.js 项目。本文将详细介绍如何使用 Vue-CLI 构建一个 Vue.js 工程。

1. 安装 Vue-CLI

在开始构建 Vue-CLI 工程之前，首先需要确保你的开发环境中已经安装了 Node.js 和 npm（Node.js 的包管理工具）。你可以通过以下命令检查是否已经安装：

node -v
npm -v

如果已经安装，你将看到 Node.js 和 npm 的版本号。如果没有安装，请前往 Node.js 官网下载并安装。

接下来，使用 npm 全局安装 Vue-CLI：

npm install -g @vue/cli

安装完成后，你可以通过以下命令检查 Vue-CLI 是否安装成功：

vue --version

如果安装成功，你将看到 Vue-CLI 的版本号。

2. 创建 Vue 项目

安装好 Vue-CLI 后，你可以使用它来创建一个新的 Vue 项目。使用以下命令创建一个新的项目：

vue create my-project

其中，my-project 是你的项目名称。执行该命令后，Vue-CLI 会提示你选择项目的配置。

2.1 选择预设配置

Vue-CLI 提供了两种配置方式：

默认配置：Vue-CLI 会为你提供一个默认的配置，包括 Babel 和 ESLint。
手动选择功能：你可以手动选择需要的功能，例如 Vuex、Router、TypeScript 等。

如果你选择手动选择功能，Vue-CLI 会提示你选择以下功能：

Babel：用于将 ES6+ 代码转换为 ES5 代码。
TypeScript：支持 TypeScript 开发。
Progressive Web App (PWA) Support：支持 PWA 应用。
Router：集成 Vue Router。
Vuex：集成 Vuex 状态管理。
CSS Pre-processors：支持 CSS 预处理器，如 Sass、Less 等。
Linter / Formatter：集成代码风格检查和格式化工具。
Unit Testing：支持单元测试。
E2E Testing：支持端到端测试。

你可以根据项目需求选择相应的功能。

2.2 选择配置文件的存放方式

在选择完功能后，Vue-CLI 会提示你选择配置文件的存放方式：

In dedicated config files：将配置文件存放在独立的文件中。
In package.json：将配置文件存放在 package.json 中。

通常情况下，建议选择第一种方式，这样配置文件更加清晰和易于管理。

2.3 选择是否保存预设

最后，Vue-CLI 会询问你是否将当前配置保存为预设。如果你希望以后创建项目时使用相同的配置，可以选择保存预设。

3. 项目结构

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

my-project/
├── node_modules/          # 项目依赖的模块
├── public/                # 静态资源目录
│   ├── index.html         # 项目入口 HTML 文件
│   └── favicon.ico        # 网站图标
├── src/                   # 项目源代码目录
│   ├── assets/            # 静态资源目录
│   ├── components/        # 组件目录
│   ├── views/             # 页面视图目录
│   ├── App.vue            # 根组件
│   ├── main.js            # 项目入口文件
│   └── router.js          # 路由配置文件
├── .gitignore             # Git 忽略文件配置
├── babel.config.js        # Babel 配置文件
├── package.json           # 项目配置文件
├── README.md              # 项目说明文件
└── vue.config.js          # Vue 项目配置文件

4. 运行项目

项目创建完成后，你可以进入项目目录并启动开发服务器：

cd my-project
npm run serve

执行该命令后，Vue-CLI 会启动一个开发服务器，并在终端中显示访问地址（通常是 http://localhost:8080）。你可以在浏览器中访问该地址，查看项目的运行效果。

5. 构建项目

在开发完成后，你可以使用以下命令将项目构建为生产环境的代码：

npm run build

执行该命令后，Vue-CLI 会将项目打包并生成一个 dist 目录，其中包含了优化后的静态资源文件。你可以将这些文件部署到服务器上。

6. 配置 Vue 项目

Vue-CLI 提供了丰富的配置选项，你可以通过 vue.config.js 文件来定制项目的构建行为。以下是一些常见的配置示例：

6.1 配置开发服务器

你可以通过 devServer 选项来配置开发服务器的行为。例如，设置代理服务器以解决跨域问题：

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

6.2 配置 Webpack

Vue-CLI 内部使用了 Webpack 进行项目构建，你可以通过 configureWebpack 选项来扩展或修改 Webpack 的配置。例如，添加一个自定义的 Webpack 插件：

const MyPlugin = require('./my-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new MyPlugin()
    ]
  }
}

6.3 配置环境变量

Vue-CLI 支持通过 .env 文件来配置环境变量。你可以在项目根目录下创建 .env 文件，并在其中定义环境变量：

VUE_APP_API_URL=https://api.example.com

在代码中，你可以通过 process.env.VUE_APP_API_URL 来访问该环境变量。

7. 使用插件

Vue-CLI 提供了丰富的插件系统，你可以通过插件来扩展项目的功能。例如，你可以使用 @vue/cli-plugin-router 插件来集成 Vue Router：

vue add router

执行该命令后，Vue-CLI 会自动安装并配置 Vue Router。

8. 总结

通过 Vue-CLI，你可以快速搭建一个功能完善的 Vue.js 项目。Vue-CLI 提供了丰富的功能和插件，使得开发者能够轻松地创建、管理和构建 Vue.js 项目。本文介绍了如何安装 Vue-CLI、创建项目、运行项目、构建项目以及配置项目。希望本文能够帮助你更好地理解和使用 Vue-CLI，提升你的开发效率。

参考文档：