vue使用ant-design-vue时按组件加载遇到的问题

chonghuan5167

于 2019-05-25 20:04:00 发布

阅读量5.5k

点赞数

文章标签： javascript ui ViewUI

原文链接：https://my.oschina.net/u/3484671/blog/3054027

版权

本文详细介绍了在使用Ant Design Vue UI库时，如何正确配置Vue CLI 3项目以实现按需加载组件。除了遵循官方文档外，还分享了在实际操作中额外所需步骤，包括安装并配置'less'和'less-loader'库，以及修改'babel.config.js'文件的具体方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一直很喜欢ant-design-vue这一套ui，在使用过成中遇到一些问题。

ant-design-vue文档：https://vue.ant.design/docs/vue/use-with-vue-cli-cn/

在官方文档中如果要vue/cli3如果要按组件加载，需安装babel-plugin-import并将babel.config.js配置成如下便可

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

在实际操作中发现，在如上操作后，并不能成功；还需引入 "less","less-loader" 两个js库；并且还需在node_modules\less-loader\dist\index.js文件中添加一句js

  options.javascriptEnabled = true

转载于:https://my.oschina.net/u/3484671/blog/3054027