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

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 }
})

安装完vue cli,想使用mui,导入mui.css报错

原来是要把整个文件都放进项目下,再去引入,因为mui.css与其它文件相辅相成,有很多关联性

写了demo的固定头和底部导航,用了mintUI和MUI,build不了

要把引入mui.css文件的单引号变为双引号

我把 "data:image/svg+xml;charset=utf-8,\"\"

用双引号包起来也不行, 然后把   用双引号包起来就行了  注意用反斜杠转义双引号 

sarari和微信浏览器预览,上下拉有灰色遮罩

去掉overflow一切属性

你可能感兴趣的:(vue使用mintUI踩坑——不显示样式/导入mui.css报错/build不了)