viewUI

• 一、按需引入
• 二、忽略eslint編譯器檢測和編譯檢測
• • 1.忽略編譯器檢測
  • 2.編譯器中忽略

一、按需引入

npm install babel-plugin-import --save-dev

// .babelrc¹
{
“plugins”: [[“import”, {
“libraryName”: “view-design”,
“libraryDirectory”: “src/components”
}]]
}

// main.js 可以統一打包一個按需引入js
import { Button, Table } from ‘view-design’;
Vue.component(‘Button’, Button);
Vue.component(‘Table’, Table);

// 引入類似message組件 - 注冊屬性
import { Message } from “view-design”;
Vue.prototype.$Message = Message
或者 增加install方法
Message.install = function (Vue, options) {
Vue.prototype.$Message = Message
}
Vue.use(Message) // use函數會執行組件的install方法，還是執行增加屬性操作

一次引入，全局可用，所以是沒辦法局部引用的，就統一放在main.js中了；
我第一次是先npm viewUI，然后npm這個插件，結果一直報錯，折騰半天發現安裝完插件后viewUI組件庫沒了，又重新安裝一次才好。

二、忽略eslint編譯器檢測和編譯檢測

1.忽略編譯器檢測

vscode中，首選項 - 設置 - 搜索 - 取勾 （將忽略所有錯誤標紅檢測）

vetur.validation.template

2.編譯器中忽略

在packagpae.json找到eslintConfig¹或者項目目錄中找到.eslintrc.js¹，加入：

// 忽略閉合組件開關檢測不通過'vue/no-parsing-error': [2, {"x-invalid-end-tag": false}],

---

這些文件在packagpae.json還是單獨存在取決于創建項目中最后一步的選項-是否將配置文件放到一起還是分開放 ?? ?? ??

總結

以上是生活随笔為你收集整理的vue项目中按需引入viewUI的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。