Vue插件之MintUI

为了开发移动端页面，我使用了vue-cli3.x和饿了么团队出品的mint-ui组件库（至于vux，这个组件库好像功能更加的丰富，内容也更多，除了组件之外，还有其他的一些内容，不过官方没有适配vue-cli3x，查阅资料，也是很麻烦的样子，我只使用少数的功能，所以暂时放弃了。好像有赞的库更好一点，不仅功能丰富，还更新很快，已经有文档说明了vue cli3.0的按需引入）。使用组件库，当然免不了要按需引入了。按照官方说明，操作步骤如下：

(1) vue create test创建工程

(2) yarn add mint-ui -S安装mint-ui.

(3) yarn add babel-plugin-component -D安装按需引入的插件.

(4) 修改babel.config.js文件为:

1
2
3
4
5
6
7
8
9
10
11

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

(5) yarn serve运行项目，结果奇怪的事情发生了，竟然报错，提示什么组件应该是一个对象。

详细错误如下：

有点让人摸不着头脑。查了很多资料，都没有类似的解决方法，于是我尝试换个解决方式

1.创建工程

这个还是和以前一样，具体可以参考我都另一篇文章Post not found: Vue-Cli-3-0使用说明 Vue Cli 3.0使用说明

2.直接安装babel-plugin-component

执行：yarn add babel-plugin-component -D,这一步就是跳过安装mint-ui这一步，直接安装babel-plugin-component,为啥这样做，谁知道呢？

3.修改babel.config.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

4.安装mint-ui

再次执行yarn add mint-ui -S,安装mint-ui。这样颠倒过来顺序，运行就没有问题了，确实挺蛋疼的。

5.使用mint-ui

在main.js中全局引入button,在helloword组件中使用mt-button

1
2
3
4
5
6

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

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)

6.运行

这个时候执行yarn serve,就可以运行了。效果图：

安装顺序都很重要，不知道什么原理。

放弃mint-ui了，尝试Vant
(1)卸载mint-ui,yarn remove mint-ui -S

(2)卸载babel-plugin-component,yarn remove babel-plugin-component -D

(3)删除bebal.config.js中的plugin选项

(4)安装vant,yarn add vant -S

(5)安装bebal-plugin-import,yarn add babel-plugin-inport -D

(6)修改bebal.config.js

1
2
3
4
5
6
7
8
9
10
11
12

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

(7)使用vant

1
2
3
4

import App from './App.vue'
import { Button } from 'vant'

Vue.use(Button)