Vue CLI是一個(gè)簡單而強(qiáng)大的工具，用于搭建Vue.js項(xiàng)目。它可以確保各種構(gòu)建工具與合理的默認(rèn)設(shè)置一起順利運(yùn)行，因此您可以專注于編寫應(yīng)用程序，而不必花時(shí)間在配置上進(jìn)行斗爭。

Vue CLI 3是目前為止Vue生態(tài)系統(tǒng)中發(fā)生的最好事情，原因如下：

1、基于插件的架構(gòu)

新的CLI實(shí)現(xiàn)了我們所謂的基于插件的體系結(jié)構(gòu)，這是對以前使用基于模板的體系結(jié)構(gòu)的版本的重大改進(jìn)。

這意味著，現(xiàn)在只有一個(gè)模板，您需要的所有其他功能都將作為插件添加。

2、靈活性

新的CLI使超級容易地開始一個(gè)新項(xiàng)目，而不必考慮將來可能需要的所有功能。

您可以創(chuàng)建項(xiàng)目，直接進(jìn)行編碼，然后在需要功能時(shí)，只需添加即可！

3、Zero-config快速原型

這樣，您就可以像處理html文件一樣來提供vue應(yīng)用或組件。

4、Vuex

新的CLI允許您將vuex添加到項(xiàng)目中，就像在以前版本中添加vue路由器一樣。

5、Typescript

現(xiàn)在正式的cli支持引導(dǎo)typescript vue.js應(yīng)用程序

6、自定義插件

如果還不夠完善的CLI官方插件，則可以創(chuàng)建您自己的自定義插件（當(dāng)然，還可以發(fā)布您的插件，以便其他人可以使用它們）。

安裝Vue CLI 3

要安裝CLI，請運(yùn)行以下代碼。

npm install -g @vue/cli

這將安裝最新版本的Vue CLI。 完成后，您可以通過運(yùn)行以下命令確認(rèn)已安裝的版本：

vue -V

更改CLI命令

與以前的版本相比，CLI命令略有變化，并且新命令已添加到好東西包中。

• vue create myproject創(chuàng)建一個(gè)名為myproject的新項(xiàng)目。

• vue serve <文件名>以零配置在開發(fā)模式下提供.js或.vue文件。

• vue build <文件名>使用零配置從.js或.vue文件構(gòu)建生產(chǎn)就緒的捆綁包。

• vue invoke <pluginname>調(diào)用已安裝的插件生成器以創(chuàng)建插件正常工作所需的文件。

• vue inspect會(huì)顯示應(yīng)用程序的webpack配置，因?yàn)樗驯煌耆橄蟆?/p>

• Vue init是為仍希望使用舊版本2的用戶保留的，但要使用此命令，您必須安裝一個(gè)全局網(wǎng)橋

為此，請?jiān)诮K端中運(yùn)行以下代碼。

npm install -g @vue/cli-init

安裝完成后。 現(xiàn)在，您隨時(shí)可以在版本3中直接開始使用版本2。

vue init webpack newapp

創(chuàng)建一個(gè)新項(xiàng)目

要?jiǎng)?chuàng)建一個(gè)新項(xiàng)目，請?jiān)谀慕K端中運(yùn)行以下代碼

vue create projectname

其中projectname是要?jiǎng)?chuàng)建的應(yīng)用程序的名稱。

系統(tǒng)將提示您選擇一個(gè)預(yù)設(shè)，默認(rèn)預(yù)設(shè)（包含babel＆eslint配置）或手動(dòng)選擇所需的功能。

如果選擇默認(rèn)預(yù)設(shè)，則CLI將創(chuàng)建您的項(xiàng)目并安裝必要的插件以使其啟動(dòng)并運(yùn)行。

如果您選擇手動(dòng)選擇功能，則CLI會(huì)繼續(xù)向您顯示所有受支持的插件，并要求您選擇要添加到項(xiàng)目中的插件。

若要選擇，請使用鍵盤上的空格鍵或A鍵選擇所有插件。

完成后，按Enter鍵繼續(xù)。

根據(jù)選擇的插件的不同，還會(huì)顯示其他提示，只需選擇所需的內(nèi)容，然后按Enter鍵，然后讓CLI完成即可。

新的CLI的一項(xiàng)很酷的功能是，創(chuàng)建的項(xiàng)目還會(huì)自動(dòng)在計(jì)算機(jī)上為您的項(xiàng)目創(chuàng)建一個(gè)新的存儲(chǔ)庫。

插件支持開箱即用

1. Typescript @vue/typescript

2. 漸進(jìn)式Web應(yīng)用程序（PWA）@vue/pwa

3. Vue Router

4. Vuex

5. CSS預(yù)處理器（postcss，css模塊，sass，less和stylus）

6. Linter / Formatters @vue/eslint

7. 單元測試 @ vue / mocha或@ vue / jest

8. E2E測試@ vue / cypress或@ vue / nightwatch

預(yù)設(shè)值

在使用CLI創(chuàng)建新項(xiàng)目并手動(dòng)選擇功能時(shí)，會(huì)創(chuàng)建一個(gè)預(yù)設(shè)。

CLI使用此創(chuàng)建的預(yù)設(shè)來創(chuàng)建項(xiàng)目文件。

它使用JSON編寫，包含創(chuàng)建新應(yīng)用時(shí)選擇的所有功能。

預(yù)設(shè)可以重復(fù)使用，從而使您可以輕松地直接跳入應(yīng)用程序，而無需在創(chuàng)建將來的應(yīng)用程序時(shí)經(jīng)歷整個(gè)功能選擇過程。

要使用CLI從先前保存的預(yù)設(shè)創(chuàng)建新項(xiàng)目，請將目錄更改為預(yù)設(shè)的位置，然后運(yùn)行以下代碼

vue create -p presetname newproject

這將使用指定的預(yù)設(shè)文件來創(chuàng)建名為newproject的項(xiàng)目名稱。

將CLI插件添加到現(xiàn)有項(xiàng)目

要將插件添加到已創(chuàng)建的項(xiàng)目中，只需運(yùn)行以下命令

vue add @vue/pwa

其中@ vue / pwa是要添加的插件的名稱，在這種情況下為Progressive Web App插件。

需要注意的一件事是，新的CLI現(xiàn)在接受軟件包的簡寫名稱，例如@ vue / pwa是CLI軟件包@ vue / cli-plugin-pwa的簡寫。

CLI將名稱@ vue / value解析為@ vue / cli-plugin-value以安裝軟件包。

Zero-config快速原型

新的CLI使得使用vue serve和vue build命令以開發(fā)或生產(chǎn)模式僅提供.vue或.js文件變得非常容易。

如果您只想測試自己的想法，而又不想打擾配置，那么這是完美的選擇。

要使用此命令，您必須首先安裝vue CLI全局服務(wù)。

為此，只需在您的終端中運(yùn)行以下代碼。

npm install -g @vue/cli-service-global

安裝完成后，您可以使用vue serve或vue build。

服務(wù)視圖

vue serve app.vue

其中app.vue是要提供服務(wù)的組件或文件的名稱。

serve命令還提供了一個(gè)選項(xiàng)，可以在運(yùn)行完命令后啟動(dòng)瀏覽器，而不僅僅是向您顯示當(dāng)前正在向其提供應(yīng)用程序的網(wǎng)址。

為此，請運(yùn)行vue serve -o app.vue

Vue build

vue build app.vue

其中app.vue是要提供服務(wù)的組件或文件的名稱。

vue build命令將構(gòu)建可用于生產(chǎn)環(huán)境的捆綁軟件，它還允許您指定是將其構(gòu)建為庫還是Web組件。

要構(gòu)建為庫，請使用vue build -t lib app.vue，而要構(gòu)建為Web組件，請使用vue build -t wc app.vue。

環(huán)境變量

新的CLI現(xiàn)在允許您在項(xiàng)目根目錄中使用.env文件來使用環(huán)境變量。

該文件由鍵=值對組成。

每個(gè)人至少需要管理2個(gè)環(huán)境，這意味著我們需要為此環(huán)境指定變量。

為了有效地做到這一點(diǎn)，CLI引入了我們所說的模式。

模式只是環(huán)境的別稱，它指定您是處于開發(fā)，生產(chǎn)還是測試模式。

創(chuàng)建僅由特定模式使用的變量。 您必須將模式名稱作為后綴添加到.env文件名中。

.env.development用于開發(fā)模式，.env.production用于生產(chǎn)模式。

注意：要使CLI將變量嵌入客戶端捆綁軟件代碼中，該變量必須以VUE_APP_名稱為前綴。

現(xiàn)在添加變量seckey變?yōu)?code>VUE_APP_SECKEY

調(diào)整Webpack配置

Vue CLI提供了一種非常簡單靈活的方法來調(diào)整內(nèi)部Webpack配置。

為此，您必須在vue.config.js中使用configureWebpack選項(xiàng)

// vue.config.js module.exports = {   configureWebpack: {     plugins: [       new MyAwesomeWebpackPlugin()     ]   } }

以防萬一您在項(xiàng)目根目錄中沒有vue.config.js文件。 您將必須手動(dòng)創(chuàng)建它。

您可能想知道：“我如何知道內(nèi)部Webpack配置中已經(jīng)存在的內(nèi)容，所以我知道需要添加什么？”

好了，這是vue inspect命令變得方便的地方。

此命令將所有內(nèi)部Webpack配置輸出到您的終端。

要將其輸出到文件，只需指定這樣的文件名

vue inspect > output.js