如何单独引入popup、picker等组件 about mint-ui

[QingWei-Li]

@acmeid 已修复

babel-plugin-component 升级到 0.3.0 支持数组表达式

[QingWei-Li]

按需引入需要使用 babel-plugin-component usage

e.g.

{
  "presets": ["es2015", "stage-0", "stage-2"],
  "plugins": ["transform-runtime", ["component", [
    { "libraryName": "mint-ui", "style": true }
  ]]],
  "comments": false
}

[acmeid]

我已经配置好了babel-plugin-component，引入toast、button这些是没问题的。但是popup就不行，mint-ui里面没有popup

[QingWei-Li]

用的最新版么 0.1.5, 我刚才试了一下没问题

[acmeid]

是的。vue版本：1.0.18；
引入：
import { Popup, Button } from 'mint-ui'

报错信息：
vue.common.js?e881:1853 Uncaught TypeError: Cannot read property 'name' of undefined

[acmeid]

我用的是.vue文件模式。我不是很清楚该怎么引入和局部注册。比如这样引入的时候：
import { Popup } from 'mint-ui'
Popup是undefined

[QingWei-Li]

如果配置了 babel-plugin-component 才能使用按需加载。如果没有配置 import { Popup } from 'mint-ui' 时还是引入的主文件，目前主文件里忘记配置 Popup 了，会导致 undefined，但是如果使用了那个插件不应该有这问题。

[QingWei-Li]

升级了 0.1.6 你再试试

[acmeid]

Popup可以了，但是（最怕但是了哈哈哈），Picker仍然不行。mint-ui也就是index文件里面有Picker这个对象，引入的时候，不是undefined。却仍然报错，估计这个组件才是真正的没有配置name
Array-syntax assets must provide a "name" or "id" field.
and
Unknown custom element: <mt-picker> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

我目前使用这样临时解决：
import picker from 'mint-ui/lib/picker' require('mint-ui/lib/picker/style.css')

[QingWei-Li]

现在是 0.1.7 再试试

[QingWei-Li]

哦 我明白了，你配置的 babel 插件没生效啊。index.js 文件里引入的 picker 没有设置上名字，一会我改一下。但是如果插件生效应该是可行的才对。

[QingWei-Li]

现在 0.1.9

你检查下你的配置项，babel-plugin-component 并没有生效，下面两种方式应该是等价的

import picker from 'mint-ui/lib/picker'
import 'mint-ui/lib/picker/style.css'

import { picker } from 'mint-ui'

但是如果不用那个插件 import { picker } from 'mint-ui' 是 index.js 里的（也就是引入了整个文件），那里面的我之前是忘记加名字了。

[acmeid]

真是奇怪了，我安装最新的是0.1.8啊，没有0.1.9。而且我也把babel-plugin-component升级到0.2.0.
现在是报 not defined
import { Popup } from 'mint-ui'
components: [ Popup ],

Uncaught ReferenceError: Popup is not defined

[QingWei-Li]

components 接受的是对象而不是数组吧？（前面说错是 0.1.8）

components: { Popup }

[acmeid]

果然是。我之前一直用的都是[]，现在换成{}就可以了。可能是mint-ui组件使用的注册方式不一样吧。谢谢

[QingWei-Li]

有可以参考的么，我看了文档貌似 components 只接受对象格式一种吧 😂

[acmeid]

不是，可以使用数组局部注册，components: [ Popup ]
可能是vue-loader起到的作用,这个我没研究过。
问题又来了😂
我现在只能这样注册：
components: { 'mt-button': Button, 'mt-popup': Popup, 'mt-picker': Picker },

下面都不行：
components: { Button, Popup, Picker },
components: [ Button, Popup, Picker ],
报未定义错误，我也不知道这算不算是个bug了

[QingWei-Li]

是的，这是 ES6 的语法
{ Popup } 会被翻译成 { Popup: Popup } 所以只能通过 <popup></popup> 使用。

[acmeid]

嗯嗯，这个确实是。那这点应该不是bug了。
看来我得看一下为什么不能使用数组注册。我本地写的组件都是用数组注册的。

[QingWei-Li]

是 bug

居然可以接受数组，babel 插件的问题，我在解决。