Vue使⽤Element-ui按需引⼊⼤坑
vue使⽤element-ui按需导⼊⼤坑
前⾔
vue element adminelement-ui按需导⼊⼩编使⽤了vue add element的⽅式，结果重新渲染app.vue⼊⼝组件，⼤⼤的bug，这是很严重的，⽐如我之前在app.vue⾥⾯配置了很多东西，写了很多函数，如果没有备份⼀下⼦就没了。
⼀、element-ui按需导⼊
终端输⼊：
vue add element
可以看到让我们选择全部引⼊还是按需引⼊，此时我们选择按需引⼊，Import on demand。
然后选择zh-CN，这时候我们可以看到此处多了⼀个plugins的⽂件夹，⾥⾯有⼀个element.js的⽂件，并且main.js中多了⼀个import的内容，并且fig.js也是注⼊了相关内容的。
如下：
main.js中多了引⼊：
使⽤⽅式：
import Vue from 'vue'
import{ Message } from 'element-ui'
Vue.use(Message)
使⽤这种加载⽅式会导致上述问题，具体原因还不是很清楚，导致每个页⾯刷新后均⾃动弹框。
解决⽅案：
把引⼊组建的⽅式改为：
import Vue from 'vue'
import{ Message } from 'element-ui'
Vueponent(Message)
结果还是报错了：
原因：
在单独按需引⼊element组件时，message组件需要挂载到Vue全局对象上，⽽不是⽤Vue.use(Message)，这是message组件与其他组件不同的地⽅。其中与之相同、需要挂载到Vue全局对象上的，还有confirm组件。
import Vue from 'vue'
import{ Message } from 'element-ui'
Vueponent(Message)
//挂载到Vue全局对象上
Vue.prototype.$message = Message
⼆、卸载element-ui 重装
卸载element-ui 重装，启动报错：
$ vue-cli-service inspect --mode production
ERROR Error: Duplicate plugin/preset detected.
If you’d like to use two separate instances of a plugin, they need separate names, e.g.
plugins: [
[‘some-plugin’, {}],
[‘some-plugin’, {}, ‘some unique name’],
]
原因：
结局⽅案：如果你已经全部卸载了element-ui，删除掉fig.js⾥⾯plugins配置即可。
三、正确卸载步骤
1. 控制台输⼊vue ui在控制⾯板的依赖中到卸载
2. 删除项⽬src的plugins⽂件夹
3. 删除main.js的element-ui导⼊
4. 删除fig.js⾥⾯plugins关于element-ui的配置
总结
⼀个按需引⼊，不容易啊，⼊了这么多坑，⼩编之前都是全局引⼊，资源消耗过⼤，不过⽅便，不需要按需加载组件，不过贵在坚持啊，bug总能解决。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。