Ant-design-vue: babel-plugin-import lead page error: Antd is not defined

[qifengwangye]

• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.1.1

Environment

ant-design-vue: 1.1.1; babel-plugin-import: 1.9.1; vue: 2.5.2

Reproduction link

https://git.coding.net/wangye84/vue-antd-admin-template.git

Steps to reproduce

when i import ant-design-vue and babel-plugin-import follow API guide's to :

// in main.js
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)

// in .babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [
"transform-vue-jsx",
[
"import",
{
"libraryName": "ant-design-vue",
"libraryDirectory": "lib",
"style": true
}
],
"transform-runtime"
],
"env": {
"test": {
"presets": ["env"],
"plugins": [
"transform-vue-jsx",
"transform-es2015-modules-commonjs",
"dynamic-import-node",
"transform-runtime"
]
}
}
}

What is expected?

my web will be display

What is actually happening?

in browser's console, i saw the : Antd is not defined

---

branch : importAntd

[tangjinzhou]

import Antd from 'ant-design-vue' and babel-plugin-import cannot be used together.
If you want to use babel-plugin-import, you should use it like this：
import { Button } from 'ant-design-vue'

[qifengwangye]

@tangjinzhou And other question, if i use what you said's way, i will not declare antd in main.js ,right? so, i import component

in .vue file,like this:

<template>
<Menu
        theme="dark"
        mode="horizontal"
        :defaultSelectedKeys="['2']"
        :style="{ lineHeight: '64px' }"
      >
        <MenuItem key="1">nav 1</MenuItem>
      </Menu>
</template>
import {
  Menu
 } from 'ant-design-vue'
const { MenuItem } = Menu
<script>
   ...
   components: { Menu}
</script>

and other more ways to use Menu's compoenets like submenu and so on,
bu i got error reponse: Unknown custom element: <itemName> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
do you kown why and how to fix it?

[tangjinzhou]

you should use it like this in main.js

import Vue from 'vue'
import { Button, message } from 'ant-design-vue'
import App from './App'

Vue.config.productionTip = false

Vue.component(Button.name, Button)
Vue.prototype.$message = message

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

More components in here

[qifengwangye]

@tangjinzhou I just fixed this problem with import my component in .vue file and use const { Item } = Menu, I was do this but without statement it in components what leaded to up question

[tangjinzhou]

https://github.com/vueComponent/ant-design-vue/blob/master/site/components.js#L109

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.