Vue CLI 插件 Plugins

插件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命令。

鏈接:https://www.9xkd.com/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章