插件Plugins
VUE CLI 是使用是基於插件的體系結構的。
如果檢查新創建的項目的 package.json
,我們將發現以 @vue/cli-plugin-
開頭的依賴項。插件可以修改內部webpack配置並將命令注入vue cli 服務,同時在項目創建的過程中列出的大多數特性都是作爲插件實現的。
基於插件的體系結構它使得VUE CLI 也更具有靈活性和可擴展性。
在現有項目中安裝插件
每個CLI插件都附帶有一個生成器(用於創建文件)和一個運行時插件(用於調整核心webpack配置並注入命令)。當我們用 vue create
創建新項目時,它將根據我們選擇的功能爲此預安裝一些插件,如果要將插件安裝到已創建的項目中,可以使用以下 vue add
命令進行安裝:
vue add eslint
該命令將調用插件的文件生成器,並可能對現有文件進行更改,因此我們在運行項目前可以提交它的當前狀態 vue add
。
vue/eslint
命令解析爲 完整的軟件包名稱:@vue/cli-plugi-eslint
,從npm安裝它,並調用其生成器。(如果沒有@vue前綴,該命令則解析爲無作用域的軟件包)
vue add cli-plugin-eslint
針對已有項目使用 vue-cli-service
安裝:
npm i -D @vue/cli-service
在package.json
中的 vuePlugins
對象中的 service
字段中引入對應的js文件,用於註冊 watch命令的文件,並自行命名然後放在根目錄。
然後在終端輸入 npm run watch
,看是否輸出watch命令註冊成功,判斷是否完成。
最後,我們可以通過運行 npx vue-cli-service help
查看 vue-cli-service
下面的所有命令,看是否新增了之前執行的 watch命令。