前言
随着 Vue.js 的广泛应用，Vue 脚手架也愈发成为前端开发的必需工具。在这个过程中，Vue-cli 系列一直是最受欢迎的选择之一。而在 2018 年初， Vue-cli3 横空出世，一经推出就迅速受到了开发者们的喜爱。相较于 2.x 版本，Vue-cli3 具备更加强大的功能和更加简化的操作。另外，在新版本中，Vue-cli3 也将默认升级至 webpack4；对于这个更加高效稳定的构建工具，我们也有必要去学习了解一下。在本篇文章中，我们将基于 Vue-cli3 和 webpack4，搭建一个简单的脚手架，并分享一些有关配置的经验和技巧。
基础环境
在正式开始之前，我们需要先配置好相应的环境。具体来说，我们需要安装以下软件：
如果您还没有安装这两个软件，请提前按照官网指示进行安装。安装完成后，我们可以通过命令行检查其版本信息：
node -v npm -v 或 yarn -v
在确保自己的环境准备就绪后，我们继续往下进行。
Vue-cli3 安装
Vue-cli3 是一个基于 Vue.js 的官方脚手架，用于快速搭建 Vue 项目。下面我们将介绍如何在命令行中安装 Vue-cli3：
npm install -g @vue/cli
或
yarn global add @vue/cli
安装完成后，我们可以通过以下命令来检查其版本信息：
vue --version
倘若出现版本信息，则说明 Vue-cli3 安装成功。
项目初始化
下面我们就可以开始针对项目进行初始化了。在本文中，我们以一个简单的 todo 应用为例，来实现我们的脚手架。
1、用 Vue-cli3 创建一个项目
首先，在命令行中执行如下命令：
vue create vue-cli3-demo
此时，Vue-cli3 会要求您进行选择一系列的模板和插件。你可以按照使用需求自行选择，也可以直接回车进入默认选择。
2、初始项目根目录
初始化后，我们就获得了一个包含一些基础文件和目录的 Vue.js 项目：
-- -------------------- ---- ------- -------------- --- ------------- -- ----- --- ------- -- ------ - --- ----------- -- ---- - --- ---------- -- ---- ---- --- ---- -- ---- - --- ------- -- -------- - --- ----------- -- ---- - --- ------- -- ---- - --- ------ -- ---- - --- ------ -- ---- - --- ------- -- --- ---- - --- ------- -- ------ --- -------- -- ----- ---- --- ------------ -- ------ ---- --- ---------- -- --- ---- --- ------------ -- ------ --- --------- -- ------ --- --------- -- ---- ------
接下来，我们先对上述目录结构逐一进行解释。
node_modules/: 项目运行时依赖的 npm 包；public/: 放置一些静态资源或公用 favicon.ico、index.html 的目录；src/: Vue 项目源码目录；src/assets/: 资源目录，用于放置图片、字体等文件；src/components/: 公用组件目录；src/utils/: 公用方法目录；src/views/: 页面目录；src/App.vue: Vue 入口文件，包含正在渲染的根实例；src/main.js: 程序入口文件，通过引入 App.vue 实现渲染所有页面；.babelrc: Babel 配置文件；.eslintrc.js: Eslint 配置文件；.gitignore: git 忽略文件，用于指定不需要提交到版本库中的文件；package.json: 项目配置文件，用于定义项目中所需依赖及配置信息等；README.md: 项目说明文件，包含项目的详细说明文档；yarn.lock: Yarn 依赖锁定文件，该文件用于记录当前项目的所有依赖包。
3、运行当前项目
当我们完成初始化后，我们可以运行以下命令，启动当前项目：
cd vue-cli3-demo npm run serve 或 yarn run serve
在命令行中看到如下提示：
DONE Compiled successfully in ****ms App running at: - Local: http://localhost:8080/ - Network: http://XXX.XXX.X.XX:8080/ Note that the development build is not optimized. To create a production build, run npm run build.
此时，我们就可以在浏览器中输入 http://localhost:8080/ 来查看当前项目。如下图所示，我们成功地启动了一个 Vue 应用。
接下来，我们进入到后续的实现阶段。
配置 webpack4
到这里，我们已经成功安装了 Vue-cli3，创建了一个简单的 todo 应用，并成功启动了项目。下面，我们进入到重点内容——webpack4 的配置。
1、理解 webpack4
webpack4 作为一款高效的前端构建工具，具备较高的灵活性和可定制性。在本文中，我们也将通过改写 Vue 脚手架中的 webpack 配置文件，配置出一个根据不同环境参数实现构建结果的简单实现。
webpack4 的常见特性：
- 环境判定，默认配置环境分为两类：环境变量，或 package.json 中的 mode 参数；
- 简化配置文件；
- 稳定性优化，提高构建性能。
2、webpack4 安装
在安装 webpack4 前，我们需要先安装如下辅助工具：
npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge
或者，也可以使用 yarn 进行安装：
yarn add --dev webpack webpack-cli webpack-dev-server webpack-merge
webpack: webpack4 的基础依赖，主要负责打包构建；webpack-cli: webpack 的命令行工具，支持在命令行中调用 webpack；webpack-dev-server: webpack 开发服务器，支持实时编译和浏览器自动刷新；webpack-merge: 用于合并不同环境下 webpack 配置文件的工具。
安装成功后，我们进入到 webpack4 的详细配置中。
3、webpack4 配置文件
下面，我们将通过一个简单的示例，依次说明 webpack4 的配置文件。
3.1、基础配置
在 Vue-cli3 脚手架生成的项目中，Vue-cli3 已经为我们集成了 webpack4 的配置文件，我们只需要新建或修改相应的 .config 文件，即可实现我们想要的配置。其中，我们需要对以下文件进行配置：
vue.config.jsbabel.config.jswebpack.config.jspostcss.config.js
接下来，我们分别说明如何进行基础配置。
3.2、vue.config.js
在我们使用 Vue-cli3 脚手架创建项目时，它会默认初始化一个 vue.config.js 文件，该文件用于一些 webpack 相关的配置。在该文件中，为了方便我们配置 webpack，Vue-cli3 已经将 webpack 的相关配置进行了抽离，并封装在 configureWebpack 和 chainWebpack 中，用于配合 webpack-merge 进行合并，从而达到相应的目的。
我们可以在 vue.config.js 中添加一些配置，比如我们要为打包出的 css 文件自动添加前缀，那么可以先安装 postcss 相关依赖：
npm install --save-dev autoprefixer postcss
或者使用 yarn 安装：
yarn add --dev autoprefixer postcss
接下来我们需要修改 vue.config.js 文件：
-- -------------------- ---- -------
-------------- - -
---- -
-------------- -
-------- -
-------- --------------------------
--
--
--
--这里，我们对于 webpack4 中的新 loader 机制，还需要在 vue.config.js 中进行一些配置。如果我们想要在 less 中使用 antd 样式，那么可以在此处添加以下配置：
-- -------------------- ---- -------
---- -
-------------- -
----- -
------------------ -----
----------- -
-- ---- ------ -----
-
-
-
-3.3、babel.config.js
在 Vue-cli3 脚手架中使用 Vue3 时，默认使用 Vue-CLI2 中的 babel 配置方式。在 Vue-cli3 中，轻轻松松地就能配置 babel，我们只需要新建一个 .babelrc 或 babel.config.js 文件，并添加相应的 plugins 或 presets，并且这个文件会自动被 Vue-cli3 自动加载。
在 babel.config.js 文件中，我们可以添加如下基础配置：
const presets = ["@vue/app"];
module.exports = { presets };3.4、webpack.config.js
对于 webpack 的基础配置文件，Vue-cli3 并没有对其进行抽离并封装，所以如果我们要修改webpack4 的基础配置文件，则需要在项目根目录下新建此文件。代码如下所示：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------- -
----- -------------------- ---------
--------- -----------------
--
-------- -
----------- ------- ------- --------- -- ------ ------ --
------ - -------- -----
------- ---------------------
-
--
------- -
------ -
-
----- ----------
---- -
---------------
-
------- -------------
-------- -
-------------- --
--
--
--------------
-
--
-
--
--如上面的代码所示，我们在当前目录下新建了一个基础的 webpack 配置文件，配置了相应的 output 和resolve，并添加了对于 .less 文件的处理，用来完成 antd css 样式和自定义样式的编译。其中，output 属性用于配置输出路径和输出的文件名，resolve 属性用于指定后缀和 .vue 文件的别名，module 属性用于处理 webpack 转换各个文件的 loader。在 module 的 rules 中，我们定义了 less 文件的处理规则，使用了 less-loader、css-loader 和 style-loader。
3.5、postcss.config.js
Vue-cli3 中自带的 postcss.config.js 文件，我们无需做过多额外配置，因为在 Kalian 脚手架中，我们已经安装了相关的库 autoprefixer 和 postcss，可以使用默认配置。我们只需要新建 postcss.config.js 文件，并在其中添加如下代码：
module.exports = {}以上，我们就完成了 webpack4 和 Vue-cli3 的简单脚手架搭建，并对以上所说的内容进行了详细介绍。这对于想要更深入学习前端的同学，实属不虚。代码部分可参见以下 Gihub 地址：
上述的示例，可以很好地应用于业务项目中。我们真心希望，我们的学习和实践，与您的项目开发，可以深入相连。
结语
到这里，本文关于 Vue-cli3 脚手架的配置内容就讲解完毕了，接下来，再来总结一下：
- Vue-cli3 是官方的 Vue.js 脚手架，用于快速构建 Vue 项目；
- webpack4 是当前前端开发中较为流行的构建工具，相比较于之前的版本，具备更加强大的功能；
- 在配置文件过程中，Vue-cli3 脚手架已经自带了部分基础配置，后续我们需要针对一些需求进行修改和完善；
- 在创建的项目中，我们还需要编写各种组件和工具函数，因为本篇文章仅仅是介绍如何脚手架的搭建和 webpack4 的配置，因此，对于已达到中等水平的前端开发者来说，上述内容也已经足够。
希望本文能对大家有所帮助，有兴趣的同学可以尝试着动手操作一下，并多多实践来拓宽自己的前端技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d6efe48841e9894a31238