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。完成後，您可以透過執行以下命令確認已安裝的版本：
更改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/pwa
- Vue Router
- Vuex
- CSS預處理器（postcss，css模組，sass，less和stylus）
- Linter / Formatters
@vue/eslint
- 單元測試
@ vue / mocha或@ vue / jest
- #E2E測試
@ vue / cypress或@ vue / nightwatch
##預設值在使用CLI建立新專案並手動選擇功能時，會建立預設。
CLI使用此创建的预设来创建项目文件。
它使用JSON编写，包含创建新应用时选择的所有功能。
预设可以重复使用，从而使您可以轻松地直接跳入应用程序，而无需在创建将来的应用程序时经历整个功能选择过程。
要使用CLI从先前保存的预设创建新项目，请将目录更改为预设的位置，然后运行以下代码
vue create -p presetname newproject
登入後複製
这将使用指定的预设文件来创建名为newproject的项目名称。
将CLI插件添加到现有项目
要将插件添加到已创建的项目中，只需运行以下命令
其中@ 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。
服务视图
其中app.vue是要提供服务的组件或文件的名称。
serve命令还提供了一个选项，可以在运行完命令后启动浏览器，而不仅仅是向您显示当前正在向其提供应用程序的网址。
为此，请运行vue serve -o app.vue
Vue build
其中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视频教程精选
更多编程相关知识，请访问：编程入门！！
以上是深入研究Vue CLI3的詳細內容。更多資訊請關注PHP中文網其他相關文章！
