vue使用mintUI踩坑——不显示样式/导入mui.css报错/build不了

本文介绍了在vue-cli3.x环境下，使用mint-ui按需引入的方法，以及遇到的导入mui.css报错和build失败的问题。通过修改babel配置和正确引入MUI文件解决了样式显示问题。同时，文章提及在Safari和微信浏览器中预览时出现的上下拉灰色遮罩问题，并提出解决方案。

vue-cli3.x之mint-ui按需引入

按需引入
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 babel.config.js修改为：

module.exports = {
  presets: ["@vue/app"],
  plugins:[
      [
        "component",
        {
          "libraryName": "mint-ui",
          "style": true
        }
      ]
  ]
};

如果你只希望引入部分组件，比如 Button 和 Cell，那么需要在 main.js 中写入以下内容：

import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import App from './App.vue'

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

new Vue({
  el: '#app',
  components: { App }
})