vue项目中按需引入viewUI

一、按需引入

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
    }],

---

1. 这些文件在packagpae.json还是单独存在取决于创建项目中最后一步的选项-是否将配置文件放到一起还是分开放 ↩︎ ↩︎ ↩︎