网站首页 > 技术文章 正文
各位同学,大家好。从本节课开始,我们进入到Vue+Echarts+Express全栈可视化大屏系统的实战开发过程中。在这节课,我先介绍一下前端Vue+Echarts部分的系统框架搭建。
01 项目相关理论介绍
1.VUE ESLint校验
在进行 Vue 项目开发时,保持代码的规范性和一致性对于项目的可维护性和团队协作至关重要。ESLint 是一个强大的工具,可以帮助我们发现潜在的问题并强制执行一致的编码规范。
ESLint 是一个静态代码检查工具,用于识别和报告 JavaScript 代码中的模式。在 Vue 项目中,ESLint 可以帮助确保代码风格一致,避免错误,并提高代码质量。ESLint 提供了许多可配置的规则,包括但不限于语法错误、代码风格、复杂性等方面?。
?Vue 3中常见的ESLint规则包括但不限于以下几种?:
?1.代码风格和格式规则?:
比如:'no-var': 2:禁止使用var关键字,使用let或const代替?。
2.?代码质量和错误避免规则?:
比如:'no-undef': 0:允许未定义的变量,但需要在编辑器中明确标识?。
3.?Vue 特定规则?:
比如:'vue/no-v-if-no-show': 2:禁止使用v-if="false",应使用v-show="false"?。
所有的配置文件都在 .eslintrc.js 中,默认情况下使用了plugin:vue/essential来校验代码。对于代码开发初期,我们可以关闭eslintrc校验,来保证项目代码编译通过。
2.项目分辨率响应式创建
flexible.js 介绍
flexible.js的we自适应方案,是阿里团队开源的一个库。使用flexible.js可以轻松搞定各种不同的移动端设备兼容自适应问题。
flexible核心功能包括:
动态设置视口(Viewport):flexible.js 会根据设备的屏幕宽度动态设置 标签中的 initial-scale 和 maximum-scale,以确保页面在不同设备上都能正确缩放。
设置根元素字体大小:flexible.js 会根据设备的屏幕宽度动态计算并设置根元素(通常是 html 标签)的字体大小(font-size)。这样做是为了方便后续使用 rem 单位进行页面布局,因为 rem 是相对于根元素的字体大小的。
适配不同设备:通过动态设置根元素的字体大小,结合 CSS 中的 rem 单位,flexible.js 可以实现页面在不同设备上的适配。开发者只需按照设计稿的尺寸,使用 rem 单位来编写 CSS,即可实现页面的自动适配。
rem介绍
rem是基于HTML元素(根元素)的font-size计算值。与传统的长度单位如px(像素)和em相比,REM具有一些优势。首先,它能够实现跨平台、跨设备的一致性布局。这是因为REM是基于字体大小的,所以当屏幕大小发生变化时,REM单位会自动调整,从而使网页在不同设备上都能保持良好的布局效果。
我们可以使用第三方插件flexible.js帮助我们修改html根节点的font-size大小,从而控制当前页面的rem屏幕适配,可以根据页面的html根节点font-size大小改变而改变。
02 项目开发实战
接下来,我们给大家讲解项目开发实战。
未完待续。
我是源动君,带领大家一起进步,谢谢观看。
猜你喜欢
- 2024-11-25 工业4.0的发展离不开数据可视化的技术支撑
- 2024-11-25 港口运输数据可视化大屏,实时数据尽收眼底
- 2024-11-25 「前端」界面可视化开发框架formio.js
- 2024-11-25 基于 Vue3.0+Antv 可视化大屏模板
- 2024-11-25 可视化大屏并非都是花架子,至少在展示数据的时候让人耳目一新。
- 2024-11-25 charts : AntV?全新一代数据可视化解决方案
- 2024-11-25 数据量大如何办?上可视化大屏,多少数据都给你安排了。
- 2024-11-25 沉淀了一套可视化搭建方案,最终决定开源了
- 2024-11-25 非常漂亮的设计,大数据可视化,三维GIS可视化,这才是大前端
- 2024-11-25 9.2K Star!ChartDB:一款强大的开源数据库可视化工具
你 发表评论:
欢迎- 599℃几个Oracle空值处理函数 oracle处理null值的函数
- 591℃Oracle分析函数之Lag和Lead()使用
- 579℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 575℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 571℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 564℃【数据统计分析】详解Oracle分组函数之CUBE
- 550℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 545℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- 前端获取当前时间 (50)
- 前端接口 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)