ant-design-vue的兼容问题

ant-design-vue的兼容问题

问题:ant-design-vue不兼容ie浏览器

要求:ie兼容 >= 9

环境:vue cli3搭建项目,ant-design-vue@1.3.8

babel.config.js文件

module.exports = {
  presets: [
    '@vue/app',
    // 兼容配置
    [
      '@babel/preset-env',
      {
        'useBuiltIns': 'entry'
      }
    ]
  ],
  // 按需加载配置
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: 'css'
      },
    ]
  ]
}

main.js文件(项目入口)

// 引入@babel/polyfill处理兼容 
import '@babel/polyfill'

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import store from './store/store'
import './plugins/antd.js'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

第二种方法:(比较麻烦,推荐第一种)

babel.config.js文件

module.exports = {
  presets: [
    '@vue/app',
    // 兼容配置,
     {
      // 要写全所有项目中需要兼容的,参考https://github.com/zloirock/core-js
      polyfills: [
        'es6.promise',
        'es6.symbol',
        'es.object.values'
      ]
    }
  ],
  // 按需加载配置
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: 'css'
      },
    ]
  ]
}

项目地址

注意事项

很多人说按照步骤操作还是有问题,主要是因为脚手架生成的项目中@vue/cli-service@vue/cli-plugin-babel版本高了(4.0以上),使用了Babel 7处理,所以本文针对项目中他们的版本要低于4.0才可以。

如果高于4.0请参考下面链接

ant-design-vue的兼容问题2
在这里插入图片描述

  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 24
    评论
<h3>回答1:</h3><br/>要在Vue3.0中使用ant-design-vue,需要先安装ant-design-vueVue3.0。可以使用npm或yarn来安装这些依赖项。 安装完成后,需要在Vue应用程序中引入ant-design-vue组件。可以在main.js文件中导入ant-design-vue并注册组件,如下所示: ``` import { createApp } from 'vue'; import App from './App.vue'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; const app = createApp(App); app.use(Antd); app.mount('#app'); ``` 在这个例子中,我们导入了App.vue组件和ant-design-vue库。我们还导入了ant-design-vue的CSS文件。然后,我们使用Vue的createApp方法创建了一个Vue应用程序实例,并使用Antd插件注册了所有的ant-design-vue组件。最后,我们将应用程序挂载到DOM元素上。 现在,您可以在Vue组件中使用ant-design-vue组件了。例如,在App.vue组件中,您可以添加一个Button组件,如下所示: ``` <template> <div> <a-button type="primary">Primary Button</a-button> </div> </template> ``` 这将在页面上显示一个蓝色的主要按钮。您可以使用其他ant-design-vue组件来构建您的Vue应用程序界面。 <h3>回答2:</h3><br/>Ant Design Vue是一个优秀的Vue UI组件库,具有丰富的组件和可定制性。在Vue3.0中与ant-design-vue一起使用时,需要遵循以下几个步骤: 1. 使用Vue CLI 5.0创建一个Vue3.0项目:可以使用Vue CLI 5.0创建一个新的Vue3.0项目,确保已安装Vue CLI 5.0,并在命令行中输入以下命令: ``` vue create my-project ``` 2. 安装ant-design-vue:在项目目录中,可以通过npm或yarn安装ant-design-vue,输入以下命令: ``` npm install ant-design-vue --save ``` 或 ``` yarn add ant-design-vue ``` 安装完成后,需要在main.js中引入并使用它,输入以下代码: ``` import { createApp } from 'vue' import App from './App.vue' import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; const app = createApp(App) app.use(Antd) app.mount('#app') ``` 3. 使用ant-design-vue组件:在Vue3.0中,可以使用ant-design-vue组件来构建UI界面,例如: ``` <template> <a-button type="primary"> Primary Button </a-button> </template> <script> import { Button } from 'ant-design-vue'; export default { name: 'MyComponent', components: { 'a-button': Button } } </script> ``` 在代码中导入Button组件,然后在模板中通过自定义标签来使用Button组件。 除了以上步骤,还可以通过自定义主题和按需加载来进一步优化ant-design-vue的使用。总之,在Vue3.0中使用ant-design-vue可以帮助开发人员快速构建出美观、易用的Web应用程序。 <h3>回答3:</h3><br/>Vue3.0是目前最新的Vue框架版本,它与前几个版本相比,在性能和开发效率上都有了很大的提高。而Ant Design Vue是一个非常流行的UI框架,也是许多Vue开发者所青睐的选择之一。在Vue3.0中使用Ant Design Vue的方法如下: 1. 安装Ant Design Vue 在命令行输入以下命令安装Ant Design Vue: ```bash npm install ant-design-vue --save ``` 2. 在Vue项目中引入Ant Design Vue 在main.js文件中导入Ant Design Vue: ```javascript import { createApp } from 'vue'; import Antd from 'ant-design-vue'; import App from './App.vue'; import 'ant-design-vue/dist/antd.css'; const app = createApp(App); app.use(Antd); app.mount('#app'); ``` 在上述代码中,我们通过import语句将Ant Design Vue导入到了我们的Vue项目中,并使用app.use(Antd)将其引入到了Vue实例中。我们还通过import 'ant-design-vue/dist/antd.css'语句引入了Ant Design Vue的CSS样式文件,以便在项目中使用Ant Design Vue的样式。 3. 使用Ant Design Vue组件 现在,我们已经可以在Vue项目中使用Ant Design Vue组件啦!例如,我们可以在App.vue中这样使用Button组件: ```vue <template> <div> <a-button type="primary">Primary Button</a-button> </div> </template> <script> export default { name: 'App', }; </script> ``` 最后,我们需要运行npm run serve命令以启动Vue项目。在浏览器中打开http://localhost:8080,应该就可以看到一个使用Ant Design Vue Button组件的页面啦! 总之,使用Ant Design Vue可以让我们快捷、高效地构建Vue项目。希望这篇回答能够帮助到你!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 24
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lydxwj

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值