VUE项目中使用mint-ui框架总结

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

针对PC端，element-ui可谓是首选了，UI体验效果很好。

element-ui 框架官网：http://element.eleme.io/#/zh-CN/component/installation

mint-ui 也是饿了么出品的UI框架（主要是针对移动端），其框架官网： http://mint-ui.github.io/docs/#/en2/quickstart

针对移动端项目，有些为了偷工减料，可以选择性的利用现成的UI框架。但是用了之后遇到了一些坑。

1.按需加载：按需引入的方式，我们不必要引入全部的UI组件，需要用什么就选择性的用什么，这样可以减小我们项目的体积，加快加载速度。

但是按照官网提示来操作，发现会报错。

正确的做法是：

修改 .babelrc文件配置

主要是在 plugins 后添加

["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]

完整的 .babelrc文件代码为：

{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [
"transform-vue-jsx",
"transform-runtime",
["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]
],
}

在入口文件引入需要用到的UI组件

import {
DatetimePicker,
Toast,
Indicator,
Picker,
Popup
} from 'mint-ui'
Vue.component(DatetimePicker.name, DatetimePicker)
Vue.component(Toast)
Vue.component(Indicator)
Vue.component(Picker.name, Picker)
Vue.component(Popup.name, Popup);

比如现在我只需要用mint-ui 框架中的 DatetimePicker , Toast , Indicator , Picker , Popup

这样就可以全局引入这些UI组件了。

官网提示说

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或写为
* Vue.use(Button)
* Vue.use(Cell)
*/

但是发现写成 Vue.use(Toast) 在页面初始化时会出现一个小黑点后消失，其实这是Toast样式里面的padding 起的作用。也就是 Vue.use(Toast) 会在页面加载时初始化。

所以为了避免出现这个问题，采用 Vue.component 引入方式比较好。

2.使用了Toast 或者 Indicator等组件时，按照官方文档，这样写就会出现“Uncaught ReferenceError: Toast is not defined”的错误

错误截图为