Ant-design-vue: vue-cli3 Fully import Antd is not defined

Created on 14 Aug 2018 · 19Comments · Source: vueComponent/ant-design-vue

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

Version

1.0.3

Environment

chrome 67 . node 9.9.

Reproduction link

https://github.com/hqzh/relaese-news/blob/master/src/main.js

Steps to reproduce

now

What is expected?

run

What is actually happening?

Antd is not defined

_20180814202920

Source

hqzh

Most helpful comment

全量加载时不要使用 babel-plugin-import 这个插件，否则就报 Antd is not defined。

jianxinliu on 17 Apr 2019

👍2

All 19 comments

发现删掉
https://github.com/hqzh/relaese-news/blob/master/babel.config.js
配置的按需加载就正常了,,但是这样性能存在问题啊

hqzh on 15 Aug 2018

👍1

按需加载的正确使用方式：
import { Button } from 'ant-design-vue';
详见文档：https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/#%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD

tangjinzhou on 15 Aug 2018

@tangjinzhou 上面我的代码我commit了.我本地开发环境是正常按需加载了.但是build后生产的又报Antd is not defined了!而且build后也没有按需加载,图一是开发,图二是生产

_20180815143953
_20180815144003

hqzh on 15 Aug 2018

我并没有看出来你的本地环境是按需加载的
建议先学习下webpack babel

tangjinzhou on 15 Aug 2018

@tangjinzhou 按需先不表,那个Antd is not defined是怎么回事啊

hqzh on 15 Aug 2018

你配置了按需加载插件会改变import默认行为

tangjinzhou on 15 Aug 2018

@tangjinzhou 那会不会影响到热更新？

nabaonan on 15 Aug 2018

不会啊很成熟的方案

tangjinzhou on 15 Aug 2018

@tangjinzhou 现在我是用babel-plugin-dynamic-import-node 这个插件之后，页面就找不到了，不知道是不是因为我用import()引入了一个不存在的路径导致的，反正现在就是不能够热更新，想用这个插件就可以在懒加载的情况下热更新，结果页面都没了，作者用过这个吗，希望指点一二

nabaonan on 15 Aug 2018

总结下,全局引入的话就不要配置按需.否者报错.但是还是吐槽下vue.我都引入了组件.还要注册...@Evan You@yyx990803

hqzh on 16 Aug 2018

请问按需加载下面这么写么？
main.js
import { DatePicker } from 'ant-design-vue'; Vue.use(DatePicker )
在babel.config.js里面配置：
module.exports = { presets: [ '@vue/app' ], plugins: [ [ "import", { libraryName: "ant-design-vue", libraryDirectory: "es", style: "css" } ] ] }
但是最后样式没有加载进来。。
我看官方说法是babel会把css也加载但是我这样没有样式诶？
请问什么原因，有没有解决方式？