前言
Vue.js 是一款流行的前端 JavaScript 框架，它具有易学易用、高效灵活、生态丰富等优点，受到了众多前端开发者的喜爱。而 vue-cli3 则是 Vue.js 官方推出的工程构建工具，它可以帮助我们快速创建 Vue.js 项目，并提供了丰富的插件和配置选项，让我们能够更加便捷地进行开发。
本文将介绍如何使用 vue-cli3 工具构建 Vue.js 项目，并结合实例代码详细讲解其中的各项配置和使用技巧，希望能够帮助读者更好地掌握 Vue.js 开发。
安装和使用 vue-cli3
在开始使用 vue-cli3 之前，我们需要先安装 Node.js 和 npm，这两个工具将成为我们使用 vue-cli3 的基础。安装好 Node.js 和 npm 后，我们就可以通过 npm 命令来安装 vue-cli3 了：
npm install -g @vue/cli
安装完成后，我们可以使用 vue 命令来创建 Vue.js 项目：
vue create my-project
其中，my-project 是我们要创建的项目名称，可以根据实际情况进行修改。执行上述命令后，vue-cli3 工具会自动下载并安装所需的依赖包，然后询问我们要使用哪种配置方案（如 Babel、TypeScript、ESLint 等），以及要不要安装推荐的插件等等。根据自己的需求进行选择即可。
配置文件详解
在使用 vue-cli3 创建项目时，它会自动生成一些默认的配置文件，比如 package.json、vue.config.js 等。这些文件中包含了许多重要的配置信息，下面我们来逐一介绍它们的作用和使用方法。
package.json
package.json 文件是 Node.js 中的一个重要文件，它用于描述项目的基本信息和依赖关系等。在使用 vue-cli3 创建项目时，它会自动生成一个默认的 package.json 文件，我们可以在其中添加或修改项目的相关配置信息。
比如，我们可以在 package.json 文件中添加如下命令：
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
}这样，我们就可以通过 npm run serve 命令来启动开发服务器，通过 npm run build 命令来构建项目，通过 npm run lint 命令来进行代码风格检查等。
vue.config.js
vue.config.js 文件是 vue-cli3 中的一个配置文件，它用于配置各种构建和开发过程中的选项和插件。下面我们来详细介绍其中的各项配置。
publicPath
publicPath 用于指定项目的公共路径，它会影响到构建后静态资源文件的访问路径。比如，我们可以将 publicPath 设置为：
module.exports = {
publicPath: '/my-project/'
}这样，构建后的静态资源文件就会被访问到 http://your-domain.com/my-project/ 目录下。
outputDir
outputDir 用于指定构建后的输出目录，默认为 dist。我们可以将 outputDir 设置为其他目录，比如：
module.exports = {
outputDir: 'build'
}这样，构建后的文件就会被输出到项目根目录下的 build 目录中。
devServer
devServer 用于配置开发服务器的选项，比如端口号、代理等。比如，我们可以将 devServer 配置为：
-- -------------------- ---- -------
-------------- - -
---------- -
----- -----
------ -
------- -
------- ------------------------
------------- ----
-
-
-
-这样，开发服务器就会在本地的 8080 端口上运行，并将所有以 /api 开头的请求转发到 http://localhost:3000 服务上。
chainWebpack
chainWebpack 用于配置 webpack 的链式操作，比如添加新的 loader、plugin 等。比如，我们可以在 chainWebpack 中添加如下代码：
-- -------------------- ---- -------
-------------- - -
------------- ------ -- -
------------------------
--------------
-------------------
----------------------
------
-----------------------
--------------------------
------
-
-这样，我们就可以在项目中使用 .md 文件，并将其转换为 HTML 页面进行展示。
示例代码
下面是一个简单的示例代码，用于演示如何使用 vue-cli3 构建 Vue.js 项目：
-- -------------------- ---- -------
---- ------- ---
----------
---- ------------
------ ------- -------
-------------- ----- ------
------- ------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------- ---------
------ -
-
--
-------- -
----------- -
------------
-
-
-
----------- -------------------- ---- ------- -- ------- ------ --- ---- ----- ------ --- ---- ----------- ------------------------ - ----- --- ----- ------- - -- ------ -----------------
-- -------------------- ---- -------
-- ------------
-
------- -------------
---------- --------
---------- -
-------- ---------------- -------
-------- ---------------- -------
------- ---------------- -----
--
--------------- -
------ ---------
--
------------------ -
------------------------ ----------
------------------------- ----------
------------------- ----------
--------------- ----------
--------- ----------
-------------------- ----------
------------------------ ---------
-
--- -------------------- ---- -------
-- -------------
-------------- - -
----------- ----
---------- -------
---------- -
----- -----
------ -
------- -
------- ------------------------
------------- ----
-
-
--
------------- ------ -- -
------------------------
--------------
-------------------
----------------------
------
-----------------------
--------------------------
------
-
-总结
本文介绍了如何使用 vue-cli3 工具构建 Vue.js 项目，并详细讲解了其中的各项配置和使用技巧。希望读者能够通过本文的介绍，更好地掌握 Vue.js 开发，提高自己的技术水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bf28dbadd4f0e0ff8af67f