Vue CLI是一个简单而强大的工具，用于搭建Vue.js项目。它可以确保各种构建工具与合理的默认设置一起顺利运行，因此您可以专注于编写应用程序，而不必花时间在配置上进行斗争。
Vue CLI 3是目前为止Vue生态系统中发生的最好事情，原因如下：
1、基于插件的架构
新的CLI实现了我们所谓的基于插件的体系结构，这是对以前使用基于模板的体系结构的版本的重大改进。
立即学习“前端免费学习笔记（深入）”；
这意味着，现在只有一个模板，您需要的所有其他功能都将作为插件添加。
2、灵活性
新的CLI使超级容易地开始一个新项目，而不必考虑将来可能需要的所有功能。
您可以创建项目，直接进行编码，然后在需要功能时，只需添加即可！
3、Zero-config快速原型
这样，您就可以像处理html文件一样来提供vue应用或组件。
4、Vuex
新的CLI允许您将vuex添加到项目中，就像在以前版本中添加vue路由器一样。
5、Typescript
现在正式的cli支持引导typescript vue.js应用程序
6、自定义插件
如果还不够完善的CLI官方插件，则可以创建您自己的自定义插件（当然，还可以发布您的插件，以便其他人可以使用它们）。
安装Vue CLI 3
要安装CLI，请运行以下代码。
npm install -g @vue/cli
这将安装最新版本的Vue CLI。 完成后，您可以通过运行以下命令确认已安装的版本：
vue -V
更改CLI命令
与以前的版本相比，CLI命令略有变化，并且新命令已添加到好东西包中。
vue create myproject创建一个名为myproject的新项目。vue serve以零配置在开发模式下提供.js或.vue文件。vue build使用零配置从.js或.vue文件构建生产就绪的捆绑包。vue invoke调用已安装的插件生成器以创建插件正常工作所需的文件。vue inspect会显示应用程序的webpack配置，因为它已被完全抽象。Vue init是为仍希望使用旧版本2的用户保留的，但要使用此命令，您必须安装一个全局网桥
为此，请在终端中运行以下代码。
npm install -g @vue/cli-init
安装完成后。 现在，您随时可以在版本3中直接开始使用版本2。
vue init webpack newapp
创建一个新项目
要创建一个新项目，请在您的终端中运行以下代码
vue create projectname
其中projectname是要创建的应用程序的名称。
系统将提示您选择一个预设，默认预设（包含babel＆eslint配置）或手动选择所需的功能。
如果选择默认预设，则CLI将创建您的项目并安装必要的插件以使其启动并运行。
如果您选择手动选择功能，则CLI会继续向您显示所有受支持的插件，并要求您选择要添加到项目中的插件。
若要选择，请使用键盘上的空格键或A键选择所有插件。
完成后，按Enter键继续。
根据选择的插件的不同，还会显示其他提示，只需选择所需的内容，然后按Enter键，然后让CLI完成即可。
新的CLI的一项很酷的功能是，创建的项目还会自动在计算机上为您的项目创建一个新的存储库。
插件支持开箱即用
Typescript
@vue/typescript渐进式Web应用程序（PWA）
@vue/pwaVue Router
Vuex
CSS预处理器（postcss，css模块，sass，less和stylus）
Linter / Formatters
@vue/eslint单元测试
@ vue / mocha或@ vue / jest
EasyCart开源网店系统下载Easycart是一款专业的电子商务网站程序，为各大企业提供最适合的电子商务网络销售网站前后台方案。Easycart是Easycart开发团队通 过对现代电子商务以及消费者购物方式进行深入研究，充分了解企业以及消费者的需求后研发的现代电子商务行业使用的程序。面向不同的企业品牌、代理商提出了 不同的方案，用户可根据企业自身特点，调整后台设置，创建最适合自己的网店模版。易学、易用、易管理、易推广，高效
E2E测试
@ vue / cypress或@ vue / nightwatch
预设值
在使用CLI创建新项目并手动选择功能时，会创建一个预设。
CLI使用此创建的预设来创建项目文件。
它使用JSON编写，包含创建新应用时选择的所有功能。
预设可以重复使用，从而使您可以轻松地直接跳入应用程序，而无需在创建将来的应用程序时经历整个功能选择过程。
要使用CLI从先前保存的预设创建新项目，请将目录更改为预设的位置，然后运行以下代码
vue create -p presetname newproject
这将使用指定的预设文件来创建名为newproject的项目名称。
将CLI插件添加到现有项目
要将插件添加到已创建的项目中，只需运行以下命令
vue add @vue/pwa
其中@ vue / pwa是要添加的插件的名称，在这种情况下为Progressive Web App插件。
需要注意的一件事是，新的CLI现在接受软件包的简写名称，例如@ vue / pwa是CLI软件包@ vue / cli-plugin-pwa的简写。
CLI将名称@ vue / value解析为@ vue / cli-plugin-value以安装软件包。
Zero-config快速原型
新的CLI使得使用vue serve和vue build命令以开发或生产模式仅提供.vue或.js文件变得非常容易。
如果您只想测试自己的想法，而又不想打扰配置，那么这是完美的选择。
要使用此命令，您必须首先安装vue CLI全局服务。
为此，只需在您的终端中运行以下代码。
npm install -g @vue/cli-service-global
安装完成后，您可以使用vue serve或vue build。
服务视图
vue serve app.vue
其中app.vue是要提供服务的组件或文件的名称。
serve命令还提供了一个选项，可以在运行完命令后启动浏览器，而不仅仅是向您显示当前正在向其提供应用程序的网址。
为此，请运行vue serve -o app.vue
Vue build
vue build app.vue
其中app.vue是要提供服务的组件或文件的名称。
vue build命令将构建可用于生产环境的捆绑软件，它还允许您指定是将其构建为库还是Web组件。
要构建为库，请使用vue build -t lib app.vue，而要构建为Web组件，请使用vue build -t wc app.vue。
环境变量
新的CLI现在允许您在项目根目录中使用.env文件来使用环境变量。
该文件由键=值对组成。
每个人至少需要管理2个环境，这意味着我们需要为此环境指定变量。
为了有效地做到这一点，CLI引入了我们所说的模式。
模式只是环境的别称，它指定您是处于开发，生产还是测试模式。
创建仅由特定模式使用的变量。 您必须将模式名称作为后缀添加到.env文件名中。
.env.development用于开发模式，.env.production用于生产模式。
注意：要使CLI将变量嵌入客户端捆绑软件代码中，该变量必须以VUE_APP_名称为前缀。
现在添加变量seckey变为VUE_APP_SECKEY
调整Webpack配置
Vue CLI提供了一种非常简单灵活的方法来调整内部Webpack配置。
为此，您必须在vue.config.js中使用configureWebpack选项
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}以防万一您在项目根目录中没有vue.config.js文件。 您将必须手动创建它。
您可能想知道：“我如何知道内部Webpack配置中已经存在的内容，所以我知道需要添加什么？”
好了，这是vue inspect命令变得方便的地方。
此命令将所有内部Webpack配置输出到您的终端。
要将其输出到文件，只需指定这样的文件名
vue inspect > output.js
相关推荐：2020年前端vue面试题大汇总（附答案）vue教程推荐：2020最新的5个vue.js视频教程精选
更多编程相关知识，请访问：编程入门！！
