无法连接插件库

很多童鞋已经用上了蚂蚁设计Vue。目前蚂蚁设计Vue也发布了支持Vue 3的2.0.0 beta版本。Vue的Ant Design是Ant Design的Vue实现，提供开箱即用的高质量Vue组件。

在Vue 3的脚手架项目中，首先安装蚂蚁设计Vue的npm包。该命令如下所示:

npm i -保存ant-design-vue@next

或者用纱安装，命令如下:

纱线添加ant-设计-vue

编辑main.js以介绍整个ant-design-vue组件和所需的样式。代码如下:

从“vue”导入{ create app }；

从“ant-design-vue”导入Antd

从'导入应用程序。/App '；

导入“ant-design-vue/dist/antd . CSS”；

const app = createApp

app.use

如果你想按需导入，比如我们的项目中只使用了日期选择框，我们不想导入整个ant-design-vue组件库，你可以借助babel-plugin-import插件按需导入。首先，在终端窗口中执行下面的命令来安装babel-plugin-import。

npm安装巴别-插件-导入-D

然后编辑项目目录中的babel.config.js文件，并添加以下内容:

模块.导出= {

预设:[

@vue/cli-plugin-babel/preset '

],

"插件":[

["import "，{"library name": "ant-design-vue "，" library directory": "es "，" style": "CSS"}]//`style: true `将加载较小的文件。

]

}

新代码以粗体显示。

接下来，可以根据需要在main.js文件中引入日期选择框的DatePicker组件。代码如下:

// babel-plugin-import会帮你加载JS和CSS

从“ant-design-vue”导入{ DatePicker }

createApp.use.mount

蚂蚁设计Vue组件库详细使用方法见蚂蚁设计Vue官网。

我叫孙鑫，是一名专注于软件开发和IT教育的老师。我喜欢我的文章，欢迎关注、转发、评论、喜欢和收藏。我会经常和大家分享关于IT技术和编程语言的文章和教学视频。目前《Vue.js从初学者到实战》完整教学视频已经发布，《Java无难事》教学视频正在发布中。

#Vue3#