2.3 Vue CLI的常用操作

本节介绍Vue CLI的常用操作。

2.3.1 获取帮助

执行“vue -h”命令，可以获取对于Vue CLI常用操作的提示。结果如下：

2.3.2 创建应用

创建应用可以使用“vue create”命令实现，例如：

vue create命令有一些可选项，你可以通过运行以下命令进行探索：

2.3.3 创建服务

在一个Vue CLI应用中，@vue/cli-service安装了一个名为vue-cli-service的命令。我们可以在npm脚本中以vue-cli-service，或者在终端中以 ./node_modules/.bin/vue-cli-service访问这个命令。

以下是Vue CLI中的默认package.json文件内容：

通过npm或yarn可以调用package.json中定义的脚本：

或者

如果你可以使用npx（最新版的npm已经自带），此时也可以直接执行如下命令：

2.3.4 运行应用

vue-cli-service serve命令会运行一个开发服务器（基于webpack-dev-server）并附带“开箱即用”的模块热替换（Hot-Module-Replacement）。该命令的用法如下：

除了通过命令行参数，还可以使用vue.config.js里的devServer字段配置开发服务器。

命令行参数entry将被指定为唯一入口，而非额外的入口。尝试使用entry覆盖config.pages中的entry可能会引发错误。

2.3.5 编译应用

vue-cli-service build会在dist/目录中产生一个可用于生产环境的包，该包包含被压缩过的JavaScript/CSS/HTML文件，并自动进行供应商块拆分（vendor chunk splitting）以便更好地被缓存。它的chunk manifest会内联在HTML代码里。命令如下：

其中一些有用的命令参数说明如下。 cFF1M4Y5/8sTWsWoavkL8OopikgkCxHBbcg21gppUvA590Nv+KMp5me4s8/C9Wma

• ––modern：使用现代模式构建应用，为现代浏览器交付原生支持的ES2015代码，并生成兼容旧浏览器的包来进行自动回退。
• ––target：允许你将应用中的任何组件以一个库或Web组件的方式进行构建。
• ––report和––report-json：生成统计报告，会帮助你分析包中的模块的大小。