Web前端應用程開發的改變者,Vue CLI 3最佳性能,靈活易用性工具

Web前端應用程開發的改變者,Vue CLI 3最佳性能,靈活易用性工具

安裝插件

在Vue CLI 3項目中安裝插件可以通過在項目初始化期間提供的交互式提示來完成:

但是,您可以使用CLI命令在其生命週期的任何時間在項目中安裝其他插件vue add my-plugin。這意味著您不僅限於您在開發初期所做的選擇。

如果您想為每個項目使用最喜歡的一組插件首選項,例如Vuex,TypeScript和ESLint以及Airbnb配置,則Vue CLI 3允許您將這些首選項保存在本地存儲的預設文件中~/.vuerc。現在,您可以立即啟動完美配置的項目!

Webpack

在任何工具軟件的房間裡的大象都是對Webpack的處理。

當您安裝第一個Vue CLI 3項目時,可能會感到放心,並且看到項目根目錄中沒有webpack.config.js。這是因為Vue CLI 3的大多數項目配置都被抽象為插件,並在運行時合併到基本配置中。

調整Webpack配置可以通過新的vue.config.js文件完成。例如,如果您想添加Webpack插件(不要與Vue CLI插件混淆),請將必要的代碼放入configureWebpack屬性中。

  1. vue.config.js

  2. module.exports={

  3. configureWebpack:{

  4. // Merged into the final Webpack config

  5. plugins:[

  6. newMyAwesomeWebpackPlugin()

  7. ]

  8. }}

如果您需要更加精彩,Vue CLI 3為Webpack配置提供了其他幾種API,允許您直接對其進行變更,或使用功能強大的webpack鏈。您可以在這裡閱讀更多關於Vue CLI 3中的Webpack配置。

注意:Webpack配置分為插件和可能的vue.config.js。要查看運行時配置,請使用該命令vue inspect。

Web前端應用程開發的改變者,Vue CLI 3最佳性能,靈活易用性工具

自定義插件

插件可以提供自己的配置選項,這些選項是通過vue.config.js的pluginOptions屬性指定的。例如,如果您使用vue-cli-plugin-critical提取關鍵CSS,則可以指定頁面並如下所示:widthheight

  1. module.exports={

  2. pluginOptions:{

  3. critical:{

  4. width:375,

  5. height:565

  6. }

  7. }}

如果您希望對項目配置進行更實質性的更改,或者如果您希望在多個項目中重複進行相同的更改,則可以抽象為您自己的自定義插件。如果你想與其他開發者分享,你可以在NPM上發佈。

使用Vue CLI 2的基於模板的體系結構可以實現這種可擴展性,因為您可以簡單地對其中一個模板進行分支並添加更改。但是,這個系統有兩個嚴重的瓶頸:

· 任何上游更新或錯誤修復都必須手動合併到分叉模板中,這使得維護起來很費力。

· 每個項目僅限於一個模板。如果您想在項目中包含多個模板的功能,該怎麼辦?您最終必須製作您自己的模板,並提供您想要的所有功能組合和功能組合,從而加劇以前的問題。

正是出於這些原因,第三方Vue CLI 2模板從未真正起飛過。Vue CLI 3已經明確地克服了這些限制,所以我預測除了官方版本之外,還會出現一些很酷的第三方插件。

沒有“彈出”

“彈出”是Create React App的術語,指的是將所有配置和構建依賴關係從腳本文件夾(認為插件)中移出並直接放置到項目中的過程。

這樣做是為了允許直接編輯配置。不過,這是一個非常不靈活的系統,因為它是不可逆的,並且阻止您能夠接收對腳本的升級,即使您只需要編輯一個。

這裡是Vue CLI 3的最大成就:插件和配置API的靈活性意味著不需要彈出Vue CLI 3項目。因此,Vue CLI 3項目在其整個生命週期中將保持可升級。

Web前端應用程開發的改變者,Vue CLI 3最佳性能,靈活易用性工具

快速原型

如果你和我一樣,有時候你會被這樣一個很酷的想法所震撼,你需要放下其他所有東西,直接進行原型設計。但是如果你必須花費半個小時來修補Webpack和Babel的配置,才能在屏幕上獲得任何東西,這真的會殺死人們的情緒。

Vue CLI 3使得從零到服務應用程序變得非常快速。它包括一個帶有熱模塊重裝的Webpack dev服務器,以及所有你期望的其他花裡胡哨的東西。

更好的是,如果Vue CLI 3全局安裝,則可以提供.js或.vue文件,而不需要本地依賴項。這使您可以執行以下操作:

  1. echo'' > App.vue

  2. vue serve

你會立即在屏幕上有一個Vue項目。

結論

我在這裡介紹的只是Vue CLI 3中的一些新功能。還有很多其他的美味佳餚,比如:

  1. · 通過.env文件在項目中使用環境變量。

  2. · 使用該命令將項目構建為可用於任何其他JavaScript項目的Web組件 vue-cli-service build --target wc --name my-element [entry]

  3. · DLL模式,可將您的NPM依賴關係構建到單獨的供應商捆綁包中,從而縮短將來構建的構建時間

    和更多。Vue CLI 3在撰寫本文時仍處於測試階段,但為何不立即開始安裝或閱讀文檔。


分享到:


相關文章: