溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下Vue CLI3，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
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 <pluginname>調用已安裝的插件生成器以創建插件正常工作所需的文件。
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 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 > outpu
看完了這篇文章，相信你對“Vue CLI3”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
