首页 > 其他分享 >创建使用Ant的vue项目时遇到的问题

创建使用Ant的vue项目时遇到的问题

时间:2022-10-28 16:14:28浏览次数:35  
标签:ant vue plugin 创建 Ant webpack 版本 polyfill

一、成功运行后vue版本

 

 

 二、创建中遇到的问题

        1、开始创建项目时,vue、ant、webpack(8.15.0)都是高版本,ant 1.7.8版本的代码不能适用(需求为:学习ant 1.7.8版本)。

               页面中一些内容不能正常显示

                开始修改版本,vue改成^2.6.11,ant改成^1.5.1,没有对@vue/cli的版本进行修改。发现页面还是不能显示,代码出现错误。

                 查看报错信息之后发现为webpack版本过高

       2、同时按照ant使用指引,使用 babel-plugin-import 进行按需导入(对于这一步,不确定是否真实需要,在mian.js中依旧是加载全部组件)。出现问题,找不到antd。

三、解决问题

       1、对于webpack版本高出现的问题,解决办法:

1-1、安装node-polyfill-webpack-plugin

  npm install node-polyfill-webpack-plugin 

1-2、vue.config.js中修改配置

        runtimeCompiler:true 解决main.js文件中使用了template:'<App/>'的报错问题

        手动引入polyfill模块,解决webpack5中移除了nodejs核心模块的polyfill自动引入的问题

 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

 configureWebpack:{ plugins:[new NodePolyfillPlugin()] } 

2、使用 babel-plugin-import 进行按需导入之后,又要全局导入,找不到antd的解决办法。

      从babel.config.js文件中移除  plugins: [['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }]]  配置信息

问题解决!!!

标签:ant,vue,plugin,创建,Ant,webpack,版本,polyfill
From: https://www.cnblogs.com/shlbetter/p/16832734.html

相关文章

  • Docker 网络管理--网络创建和通信
    一、网络驱动docker可以通过创建虚拟网卡,通过虚拟网卡转发到宿主机网卡和外部进行通信。除此之外,也可以不创建自己的虚拟网卡而是直接和宿主机共用网卡直接占用宿主机I......
  • vue 中的键盘事件
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-e......
  • Jmeter固定吞吐量控制器Constant Throughput Timer
    控制请求的TPS,可以使用JMETER的固定吞吐量控制器ConstantThroughputTimerTargetthroughput(insamplesperminute):目标吞吐量(单位分钟),即每分钟执行多少次(TPM)Calcu......
  • vue数据值变了,但是input视图没有更新怎么办?
    直接给对象的属性赋值,并不能使得视图发生变化,此时我们可以用vue的$set方法来赋值解决这个问题this.$set(对象,'属性名','属性值')使用这段代码给对象赋值this.$set......
  • 直播app开发,Vue动态设置样式和class名
    直播app开发,Vue动态设置样式和class名一、动态设置样式 <template><div:style="{backgroundImage:'url('+bgimg+')',fontSize:'size'}"></div></template><scri......
  • vue事件修饰符
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-e......
  • 创建型模式03----建造者模式
    建造者模式(Bulider模式)相关优秀的文章—秒懂设计模式之建造者模式文章目录​​建造者模式(Bulider模式)​​​​模式的定义和特点​​​​建造者定义:​​​​优点​​​......
  • 每日一题之请描述Vue组件渲染流程
    组件化是Vue,React等这些框架的一个核心思想,通过把页面拆成一个个高内聚、低耦合的组件,可以极大程度提高我们的代码复用度,同时也使得项目更加易于维护。所以,本文就来分......
  • 一面高频vue面试题
    组件通信组件通信的方式如下:(1)props/$emit父组件通过props向子组件传递数据,子组件通过$emit和父组件通信1.父组件向子组件传值props只能是父组件向子组件进行......
  • 每日一题之Vue的异步更新实现原理是怎样的?
    最近面试总是会被问到这么一个问题:在使用vue的时候,将for循环中声明的变量i从1增加到100,然后将i展示到页面上,页面上的i是从1跳到100,还是会怎样?答案当然是只会显示100,并不会......