前言
Vue-Cli 是 Vue.js 官方提供的一个 CLI 工具，用于快速构建基于 Vue.js 的应用程序，但是在 Vue-Cli 3 版本之前，如何使用 vue-cli 进行前端项目的构建还是一件有挑战性的事情，需要对项目的各个细节进行极其细致的设置，容易出现各种问题，如：webpack 配置、eslint 等。
Vue-Cli 3 的大胆创新，使用了模块化的配置方式，解决了这些问题，使用起来变得更为便捷和易用。
本文将详细介绍如何使用 Vue-Cli3 快速搭建 SPA 应用的过程。
环境准备
- Node.js v8.9.0 或更高版本
- npm 或 yarn 包管理工具
安装 Vue-Cli
推荐使用 yarn 进行安装。先全局安装 yarn：
--- ------- ---- --
安装 Vue-Cli：
---- ------ --- --------
安装完毕后，使用下面的命令查看 vue-cli 版本号：
--- ---------
如果版本号显示正常，表示 Vue-cli 安装成功。
创建项目
使用命令行工具，进入到新建项目的目录中，然后执行以下命令：
--- ------ -------------
其中 projectName 为项目名称，请根据自己的需求修改。
执行后，会出现一个交互式的命令行界面，询问我们是否需要预设配置：
--- --- ------ - ------ ---- - ------- -------- ------ -------- ------- ------- ------- - ------- ------- -------
由于我们这里用于开发单页应用，选默认配置就可以，因此选择 default 。
选择完毕后，vue-cli 会下载相关依赖，需要一点时间等待，通常需要几分钟的时间。
项目结构分析
项目结构分析如下：
----------
--- ---------
--- ------------
--- ---------------
--- ------------
--- ----------
--- ------
- --- -----------
- --- ----------
--- ---
--- -------
--- ------
- --- --------
--- ----------
- --- --------------
--- -------public目录下是不经过 webpack 处理的静态资源。src目录是我们主要的开发目录，包含了项目入口、页面组件、存放图片、css 等。
运行项目
进入 my-project 目录，通常，我们需要先执行安装：
-- ---------- ---- -------
然后运行开发环境：
---- -----
或执行以下npm命令：
--- --- -----
执行完成后，浏览器将自动打开项目首页。
构建与部署
要进行生产环境构建，则执行以下命令：
---- -----
此命令将构建生产环境使用的项目文件，通常文件构建在 dist 目录下，如果生成了生产环境需要部署的代码，我们可以将 dist 目录复制到服务器上进行部署。
项目总结
Vue-Cli3 已经成为了开发 Vue.js 应用程序的首选工具，使用它可以让项目构建更加迅速，而且将配置模块化，可以使开发人员更好地理解项目结构和依赖关系，省去了很多不必要的时间和麻烦。希望这篇文章对大家学习使用 Vue-Cli3 有所帮助，欢迎交流和讨论。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654c39367d4982a6eb5d4148