vue3 vue2,vue3使用

　　在上一篇文章中，我们介绍了使用Vue3 (I)创建Vue CLI项目。接下来我们来看看蚂蚁设计Vue与Vue3整合的相关资料。有需要的可以参考文章具体内容。

　　一、蚂蚁设计Vue II的整合。组件的使用1。完整报价2。组件报价3。组件使用示例1。我们在主页2上做了修改。已重新启动服务以检查效果4。总结了上一篇文章。我们介绍了使用Vue3来创建Vue CLI项目。(1)接下来，我们在上一篇文章的基础上继续了下一篇文章的内容。

一、集成Ant Design Vue

　　SQL：

　　npm安装ant-design-vue@2.0.0-rc.3 - save

　　兼容性：

　　Antvue 2.x支持所有现代浏览器。

　　如果需要支持IE9，可以使用Ant Design Vue1.x Vue2.x。

　　对于IE系列浏览器，需要提供对es5-shim、es6-shim等Polyfills的支持。

二、组件的使用

　　官方网站地址：https://2x.antdv.com/docs/vue/getting-started-cn

1、完整引用

　　在main.ts中修改内容如下：

　　分时（同timesharing）

　　从“vue”导入{ create app }；

　　从“ant-design-vue”导入Antd

　　从导入应用程序。/app . vue ；

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

　　从导入路由器。/router ；

　　从导入存储。/store ；

　　//优点是容易开发，缺点是打包的时候会让文件变大(不过不影响什么)

　　createApp(应用程序)。使用(存储)。使用(路由器)。使用(Antd)。挂载(#app)

2、组件引用

　　完整的介绍之后，我们就可以愉快的使用组件了，如果你之前用过Vue2.0或者Element UI的话会更快。

三、组件使用示例

　　让我们在主页上添加一个按钮，如下图：。

1、我们在home主页做修改

　　HTML：

　　模板

　　div class=home

　　a-button type=primary 危险主要/a-button

　　img alt=Vue logo src=./assets/logo.png

　　HelloWorld msg=欢迎使用您的Vue.js TypeScript应用/

　　/div

　　/模板

　　脚本语言

　　从“vue”导入{ define component }；

　　从“@/components/HelloWorld.vue”导入HelloWorld//@是/src的别名

　　导出默认定义组件({

　　姓名：家，

　　组件：{

　　HelloWorld，

　　});

　　/脚本

2、重新启动服务查看效果

　　双击服务器启动，查看结果如下图：

四、总结

　　这就是这篇关于Vue3集成Ant设计Vue的文章。关于Vue3集成Ant Design Vue的更多信息，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。