【项目实战】 改造原前端ViewUI框架，使其支持ElementUI 与 Avue
一、背景说明
因为原来前端的同事习惯用，ViewUI框架，于是基线版本的项目，都是使用的ViewUI框架搭建的。
但是，这个ViewUI的表格，是引用的第三方的vux的框架，在网上很少人使用，所以遇到问题，基本上没有人解答。
只能请教原前端同事作者，反正就是对我们这种半吊子前端开发者非常之不友好
于是，在了解了ElementUI和Avue框架之后，就坚定了要改造的信念，于是便有了下面这篇文章~
二、选用ElementUI和Avue框架的理由
2.1 Avue的低代码，缩短开发时间
因为大部分的web业务都是进行数据的增删改查，如果有一个框架能帮你更好的做这个事情，而且所用时间更短，所需的学习成本更低，何乐而不为呢？没错，Avue就是这款框架，具体可以看我的Avue的技术文档介绍。
2.2 ElementUI拥有更强大的生态
现在国内主流的前端框架就是Vue+ElementUI的组合，妈妈再不不用担心我遇到的问题百度搜不到了。。
因此，我给ElementUI命名为半吊子前端开发者友好框架，哈哈。
三、具体改造步骤
Step1、在dependencies中引入ElementUI依赖
"dependencies": {element-ui": "^2.15.12",
Step2、全局组件挂载Element UI
// 全局组件挂载UI
Vue.use(Element, {size: 'medium' // set element-ui default size
})
Step3、在dependencies中引入引入Avue依赖
"dependencies": {"@smallwei/avue": "^2.10.0",
Step4、全局组件挂载Avue
//全局组件挂载UI Avue
Vue.use(Avue);
Step5、重新执行npm install
因为你引入了新的组件，IDEA 的专业版会自动检测出来有新的依赖，他会自动提示要重新执行npm install。
非常的智能哦 ！
Step6、
四、查漏补缺，收尾问题修复
因为网络请求Axios、基础框架Vue、打包框架Webpack、NPM啥的，都差不多使用，基本不用改。
所以，具体问题具体分析，不同项目没有共性可言，具体涉及到哪些，遇到后，再Fix即可。。
3.1 解决SASS报错的问题
这个问题，困扰了我快三个月。。
最后还是请教了前端同事解决的。
解决方案非常简单，就是升级下版本即可。
3.2 Cannot find module ‘./element-ui‘ or its corresponding type declarations.
详细见文章
【异常】解决 Cannot find module ‘./element-ui‘ or its corresponding type declarations.
【项目实战】 改造原前端ViewUI框架，使其支持ElementUI 与 Avue相关推荐
- 新书推荐 |《OpenCV 4计算机视觉项目实战（原书第2版）》
新书推荐 <OpenCV 4计算机视觉项目实战(原书第2版)> 长按二维码 了解及购买 一本使用OpenCV进行计算机视觉应用开发的实践,指南不仅介绍OpenCV基础知识,还详细讲解各种实 ...
- 开源项目介绍｜OMI - 前端跨框架框架
2022腾讯犀牛鸟开源人才培养计划 开源项目介绍 滑至文末报名参与开源人才培养计划 提交 OMI 项目Proposal OMI 项目介绍 OMI 是基于webcomponents前端跨框架框架,曾荣登 ...
- 【项目实战课】基于ncnn框架与KL散度的8bit对称模型量化与推理实战
欢迎大家来到我们的项目实战课,本期内容是<基于ncnn框架与KL散度的8bit对称模型量化与推理实战>. 所谓项目实战课,就是以简单的原理回顾+详细的项目实战的模式,针对具体的某一个主题, ...
- Linux系统下Qt项目实战（原神模拟器）
原神模拟器 <原神>是由上海米哈游网络科技股份有限公司制作发行的一款开放世界冒险游戏. <原神>整体的玩法架构可圈可点,基于行业成熟设计经验打造的内容十分惊艳, ...
- ffmpeg 获取帧率_项目实战：Qt+FFmpeg录屏应用（支持帧率、清晰度设置）
若该文为原创文章,转载请注明原文出处 本文章博客地址:https://blog.csdn.net/qq21497936/article/details/109827936 各位读者,知识无穷而人力有穷 ...
- 它有什么本事，能成为Apache基金会项目？阿里移动前端开源框架Weex揭秘 移动开发...
2019独角兽企业重金招聘Python工程师标准>>> 或许你写过了很多行代码,修过许多的bug,学过各种各样的语言,却只在一个最好的时机遇见了他-- 是啥? 敲!黑!板!跟!我!念 ...
- WPF项目实战合集2——WPF框架
WPF框架MvvmLight 下载安装插件 更换接口与命令 UI界面委托传递参数 命令的泛型编程 Message消息传递 发送消息 注册并接收消息 MicrosoftToolKitMVVM 继承方法与 ...
- Python全栈工程师之从网页搭建入门到Flask全栈项目实战(3) - 入门Flask微框架
- 前端zrender框架使其可拖拽
废话不多说,上代码,代码都有注释 loadCamera: function (item, i) { //加载方法 item是实体类参数//两个miter是为了适应屏幕自适应let widthMiter ...
最新文章
- 阿里云EMR异步构建云HBase二级索引
- 「递归」第8集 | 当敲代码的手开始写歌，玩跨界的程序员有多野？
- android 立体 流量球,Android自定义View——实现水波纹效果类似剩余流量球
- 工业交换机品牌选择时注意的事项介绍
- 科技计划项目数据管理过程模型
- C语言中定义整形可以连等吗,关于一道分解整数为N个连数整数的编程题
- vue实现页面权限显示_Vue 实现前端权限控制
- Flutter实战一Flutter聊天应用（八）
- VS2015+OpenCV3.4.0+dmtx最新版联合集成开发 解析dm码
- Camera IIC总线
- 房屋水电煤气省钱秘籍
- 如何设置Excel2016自动换行，干货到！怎样将excel单元格中内容长了自动换行快捷键？
- 报错！Exception in thread “main“ java.lang.UnsatisfiedLinkError: ilog.cplex.Cplex.CPXopenCPLEX([I)J
- 如何更新neovim以及安装指定版本
- 现在好的微博营销技巧都有哪些呢？
- 哨兵2号（Sentinel-2）卫星数据批量处理
- matlab 信号插零,【 MATLAB 】MATLAB 实现模拟信号采样后的重建（二）零阶保持（ZOH）...
- 中科大MEM工程管理硕士专业考研初试与复试经验分享
- Pytorch-《Deep learning with pytorch》1.2.2 使用GAN将“马变成斑马”
- Oracle DG日常运维命令大全