vue2.0之Mint-UI配置填坑

谁借莪１个温暖的怀抱￠ 2022-06-07 03:14 193阅读 0赞

Vue项目搞了这么久，也差不多得给界面换换衣服，看起来专业一点。

网上搜了搜，选择了比较流行的饿了么出品的针对移动端的mint-ui，若是PC端可以用更全面的element-ui，这里就不多做介绍了。

起初以为看看文档就能直接上手用的东西愣是花了接近一天的功夫才跑起来，只能说文档在初始化引导方面还是存在缺陷，

像我这样的新手小白很可能就掉进坑里爬不起来。

首先按照使用文档一步步来：

1、npm安装

npm i mint-ui -S

2、引入Mint UI

这里有两种方式：完整引入or按需引入部分组件。

一：完整引入

import Vue from 'vue'
    import MintUI from 'mint-ui'
    import 'mint-ui/lib/style.css'
    import App from './App.vue'
    
    Vue.use(MintUI)
    
    new Vue({
      el: '#app',
      components: { App }
    })

这种方式把所有ui组件都提前导入，问题就在于项目体积会很庞大，所以官方更推荐第二种方式

二：按需引入

借助babel-plugin-component，可以只引入需要的组件，达到减小项目体积的目的。

先安装babel-plugin-component:

npm install babel-plugin-component -D

然后，将.babelrc修改为：

{
      "presets": [
        ["es2015", { "modules": false }]
      ],
      "plugins": [["component", [
        {
          "libraryName": "mint-ui",
          "style": true
        }
      ]]]
    }

之后，比如你只需要引入Button组件，那么在main.js中写入一下内容：

import Vue from 'vue'
    import { Button } from 'mint-ui'
    import App from './App.vue'
    
    Vue.component(Button.name, Button)
    /* 或写为 * Vue.use(Button) */
    
    new Vue({
      el: '#app',
      components: { App }
    })

好的，官方说明到此结束，坑也随之而来。

童鞋们如果天真地按照这份文档操作，就会发现无论是用完整引入还是按需引入，在npm run dev的时候都会报下面的错误：

![20171009100729914][]

大意就是缺少loader去解析mint-ui的css文件。

在网上寻找到解决方案是在webpack.config.js文件里添加如下语句：

{
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }

再保存重新npm run dev一遍就可以正常跑起来了：

![20171009101809917][]

[20171009100729914]: /images/20220607/bb215dc3f4a14062bd881b0364172c16.png
[20171009101809917]: /images/20220607/b36532926f324c5e9550c6909254dec0.png