vue 大事件思路整理

最新推荐文章于 2024-12-13 15:46:02 发布
最新推荐文章于 2024-12-13 15:46:02 发布
阅读量600 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Android_boom/article/details/125346511
本文详细梳理了使用Vue.js进行前端开发的各个步骤，包括登录注册、路由拦截、组件设计、数据交互、响应式处理、表单验证、图片上传、富文本编辑等内容。在每个板块中，作者详细讲解了遇到的问题、解决方案以及最佳实践，为读者提供了一个全面的Vue.js开发指南。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

第一板块

image.png

  1. 在配置文件中设置ESLint报错规则: 第一个框是用来关闭函数名前没有空格 报错; 第二个框是关闭 因为组件名字没有驼峰命名或者多单词命名 报错

image.png

  1. 这里的验证函数只能放在data函数中, 考虑到this的指向和能否获取数据

image.png

不论成功还是失败, 这里的callback必须要用, 否则后面的校验会失败, 就像拦截器中的next()方法

注意其中需要用到this的地方必须要用箭头函数(整理一下)

每个组件都有一个默认的类名, 名字就是标签的名称

表单校验规则流程: image.png

第一板块思路整理

做登录和注册页面的动态js效果

  1. 创建store文件用来建立仓库, 创建views文件夹再分别创建login和reg文件夹用来存放vue组件, 创建router文件夹用来设置路由配置
  2. 在app.vue中设置路由挂载点, 在main.js中引入store router axios element-ui 和'element-ui/lib/theme-chalk/index.css'文件 分别挂载到vue对象上或原型上
  3. 对reg.vue组件进行操作, 从element官网拿到代码粘贴过来, 并修改得到静态页面
  4. 对输入框进行正则校验, 用户名为0-10位以字母开头的字符串, 密码和密码校验为6-15位非空字符串, 并且确认密码要进行两次密码相同校验(需要在data中定义函数)
  5. 点击注册按钮进行兜底校验, 拿到表单组件元素通过兜底校验后发送ajax, 如果验证通过则编程式跳转至登录页, 同时点击去登录按钮直接能跳转至登录页
  6. 和注册页功能相似, 完成基本功能后, 点击登录按钮发送ajax, 能够拿到token(此时已安装vuex-persistedstate插件并设置在路由配置中), 通过mutations方法传递toekn过去并将state中token赋值, 登录成功后, 跳转至Main.vue

第二板块

注意

  1. alert / comfirm / prompt 内置方法会阻止渲染, 因为是同步操作 (如果是异步操作, 弹窗的时候还会执行后面的代码)
  2. 在store中的this指向为vuex(也就是store组件对象, 在actions和mutations中的this都指向store对象), 也就是说在main.js中挂载的axios方法拿不到, 需要在子模块中再引用axios模块 (子组件中的this是指向vueomponet组件对象, this.$store才是store对象)

image.png 4. 在声明周期初期, 初始化阶段, 在初始化的时候, data注入数据的时机比computed早, 所以不能在data中直接使用computed中的内容(就是不能用data中数据直接赋值this.计算属性中数据) 5. 这种方式能实现数据的一层拷贝(能让两个赋值的数据指向不同的地址) image.png - 补充: Object.assign(target目标, source源) 将指定的对象, 赋值到目标对象, 返回目标对象,实现数据拷贝 - 当然还可以通过JSON.parse(JSON.stringfy(对象))实现深拷贝

image.png

  1. 字面量是为了更好的用来创建对象, 数组等…
  2. data是一个函数而不是对象, 是因为我们需要创建的实例都有不同的地址, 如果data是对象, 那么创建出来的对象都指向data, 数组则会相互篡改

组件中data函数的函数

image.png

这个data函数中的函数只能放在这里, 因为要考虑到checkPwd中的this指向(直接放在原处显得代码很乱, 放在data外面this指向为undefined)

左侧菜单栏的实现

image.png

要渲染的数据

image.png

template标签的应用注意:

  1. 虚拟标签, 可以用来包裹多个标签, 这个标签不会真实渲染, 所以可以用来处理互斥渲染的处理
  2. v-for的key必须要添加在真实标签上, 也就是说template不能设置key
  3. 侧边菜单创建 以前v-for都是对于单个标签的渲染, 这里需要对两个互斥标签进行渲染
  4. 目前共涉及三处使用template标签
    • 组件中的三大标签之一
    • 用作插槽
    • 用作虚拟标签

项目中的路由拦截

image.png

  • 在router中index.js中注册全局前置守卫(每次路由跳转前拦截, 决定是否放行),
  • 这里要实现: 当页面 没有token 并且 不在login页面 并且 不在reg页面 时, 就跳转至login页面
  • ||的意思是左右两边任意一个为true, 如果写为to.path !== '/login' || to.path !== '/reg' 相当于所有情况都判断为true(也就是没用)

路由拦截

// src/router/index.js 路由模块
Vue.use(VueRouter)

// 把下面的代码粘贴到路由模块中对应的位置，即可防止路由报错的问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

请求响应拦截器

// 添加请求拦截器 
axios.interceptors.request.use(function (config) {     
    // 在发送请求之前做些什么 
    return config;   
}, function (error) {     
    // 对请求错误做些什么 
    return Promise.reject(error);   
});  
// 添加响应拦截器 
axios.interceptors.response.use(function (response) {     
    // 对响应数据做点什么 
    return response;   
}, function (error) {    
    // 对响应错误做点什么 
    return Promise.reject(error);   
});

导航菜单中的路由跳转

image.png

image.png 可以给表单直接设置一个router属性, 当点击 其中所有设置了index的跳转到

第二板块思路整理

  1. 退出功能, 用了element中的退出功能逻辑, 记得删除token
  2. 头像这块功能用发请求的方法拿到数据, 数据通过在子组件中created函数触发, 在actions中发送请求拿到数据后, 传递数据到mutations, 再修改state中的userInfo数据, 通过vuex中数据对头像和名字渲染
  3. 侧边栏的实现, element拿到静态代码, 通过发送请求拿到渲染左侧的数据, 直接在当前组件发送请求和渲染即可, 注意data和computed注入数据时机问题
  4. 请求响应拦截器解决token, 在main.js中设置, 在请求拦截中给请求添加token, 对于token过期的响应错误处理, 清除原有token, 跳转到登录页, 注意在每次请求后都要有弹窗提示
  5. 路由前卫拦截, 每次路由跳转, 当没有token并且不是去登录并且不是去注册页, 就跳转到登录页
  6. userinfo.vue中 , 用户基本信息为二级路由, 用element拿到静态代码, 设置验证规则, 注意正则规则的属性为pattern, 邮箱需要设置属性为type:“email” , 这里要注意v-model会修改vuex中数据的问题
  7. 点击修改, 兜底验证, 通过则发送请求更新数据 , 重置可用表单的方法

前两个板块思路整理 及 注意点

思路

  1. 创建好文件夹及文件, 配置好router文件, 和vuex文件, 在main.js中导入router store element-ui less文件 css文件 axios 并配置到vux对象上, 挂载axios到原型并配置基地址

image.png

  1. 注册页的实现, 从element拿到静态代码, 绑定数据并绑定验证规则, 注意密码验证中的validator属性要在data中设置一个函数, 记得每次表单提交都需要进行兜底校验, 利用elemnent的表单组件validate方法, 再发送ajax请求获取数据, 通过则跳转至登录页, 还要记得每次发送ajax之后都要设置可视化提示弹窗

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qrD81eKt-1655532555683)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f9e769249edd44bcb6ede5f60529b238~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

  1. 登录页的实现和注册页差不多, 基本功能实现后点击登录兜底校验后, 发送ajax请求, 将请求回的token设置到state中, 配置token持久化存取的插件, 跳转至main.vue主页
  2. main主页的实现, 进来页面直接发送ajax请求, 将数据存储在state中, 并且渲染用户基本数据; 同时在当前页面发送ajax请求拿到侧边栏的数据, 根据element静态代码进行数据渲染
  3. 路由的设置, 在element表单上设置router属性, user-info跳转至基本资料页, 并且默认显示Home组件, 所以需要对Main组件设置两个二级路由
  4. 基本信息页的实现, 这个页面要注意userForm的数据不能直接用computed中的, 要在created函数中进行深拷贝(就是实现赋值只给数据, 不给数据的地址), 点击重置触发表单重置方法resetFields, 点击修改兜底校验通过后发送请求, 更新state中数据

image.png

注意

  1. 记得每次表单提交都需要进行兜底校验
  2. 记得每次发送ajax之后都要设置可视化提示弹窗
  3. 规则验证中的几个应当注意的属性: validator(用来进行进一步表单校验) pattern(设置正则校验) type:“email”(直接对输入框匹配email的正则验证)
  4. 在element的表单上设置router属性能跳转element-item上绑定的index中的路径(很好用, 相当于自动设置了$router.push())
  5. 要注意input表单中v-model双向绑定会自动修改state中数据的问题
  6. delete请求方式需要这样写配置参数

image.png

第三板块

更换头像页面

image.png

图片上传功能

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A99Jiw8A-1655532555685)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5a33aade10134a128351a6aec2393204~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

image.png

注意

  1. 这里的accept属性, 能够让文件只选择特定的文件类型(这里用 * 表示能用任意图片格式), 选择了文件之后就触发change事件
  2. 利用好看的按钮点击之后, 能够触发文件input:file框
  3. img的src只能设置成: BASE64(DataURL) 或 URL

image.png

第三板块思路整理

  1. 添加头像页面, 通过按钮触发文件选择按钮, 注意文件标签选择中的accept属性, 用来设置指定图片格式, 点击选择了图片后, 触发事件, 能够将图片转为base64格式, 并赋值到头像图片的src, 点击上传头像, 能够发送请求并获取更新后的数据
  2. 重置密码页面, 从element中拿到静态代码, 对输入框进行正则校验, 并注意其中的validator属性, 能够自定义校验规则, 点击重置按钮能利用resetFields方法重置表单, 点击修改密码能发送请求并弹出提示框, 再重置表单
  3. 文章分类页面, 点击添加分类按钮能够弹出添加框, 为添加框设定校验规则, 点击修改按钮, 能够自动渲染当前行的数据(这里要用到自定义插槽), 点击弹出框中确定按钮, 兜底校验后发送请求, 并更新数据, 点击删除按钮拿到element中关于删除校验的代码, 点击确定删除发送请求(注意这里的请求参数是用{ params:{ id } } )

注意

  1. 要让输入框在进来网页时就自动获取光标, 用的是自定义命令directive (分为局部设置和全局设置, 当时是给特定标签设置自定义命令v-focus, 能够在DOM树渲染时自动执行该函数)’
  2. validator为自定义校验规则, 绑定的函数会三个参数, 注意必须要调用callback回调函数

image.png

  1. 如果是用户操作的内容就需要提示框提醒, 兜底校验之所以不用提醒, 是因为规则校验有提醒了
  2. this.$route.path 能拿到当前url中路径(/home )(这里实现的是导航的默认高亮, 刷新的时候能够根据)
  3. $route 和 scope 不能直接在页面上利用插值表达式进行渲染, 可以在函数中处理后再放到标签中
  4. 注意FileReader构造函数创建的实例对象有一个readAsDataURL的方法, 能够将传入的文件转成base64格式并挂载到实例对象上 (对文件的操作都是异步操作)
  5. el-table中的scope的用法: 拿到绑定在el-table上数组的每一项指定数据

image.png

  1. 配合这个函数, 实现点击修改按钮, 弹出框中数据自动渲染(注意这里用了{...row}的方式避免将articleList和editForm的地址绑定)

image.png

  1. 如果后台要求查询参数就传params, 请求体就直接传对象

image.png

  1. 图片上传可以用 FormData() 或者 用FileReader()转成base64格式
  2. axios默认的传输格式是application/json (在浏览器请求头中能看到, 也就是说后台没有要求其他格式的时候, 都是用的这种格式传输)

image.png

第四板块

弹出对话框的设置

image.png

  1. 这里的:before-close 能够在点击x或者点击弹出框以外的区域时执行里面的函数
  2. 注意这里$comfirm函数里面有三个参数, 其中第三个参数是对象

利用深度选择器给标签添加样式

image.png

  1. 原理: 将以前的交集选择器(.ql-editor[datas-v-hash]) 改为后代选择器([data-v-hash] .ql-editor)
  2. style标签如果添加scoped 那么其中的选择器就选不到组件中的标签 (也就是说引入的组件中的页面标签不会赋予hash, 样式对组件中的标签不生效)

对element外的组件(富文本编辑器)进行校验的方式

image.png

主动调用element表单的validateField('校验规则')方法

补充

  1. 表单的方法, 通过$refs.表单名.方法名调用方法, 第一个用来进行表单的兜底校验, 回调函数会返回布尔值; 第二个能够配合其他组件自定义校验方式 (还是需要通过prop绑定校验规则) ;第三个能重置表单中的内容;

image.png

image.png

  • 注意: URL.createObjectURL(文件)一般是用来预览图片才会用到, 该方法是原生webapi的方法, 作用是将文件转成URL, URL的生命周期和当前窗口绑定
  1. resetFields()方法能清空当前绑定表单已设置的prop属性中的变量
  2. http 只能传输两种类型的数据 字符串 和 二进制

image.png

  1. 利用Object.keys优化for in

image.png

image.png

第四板块思路整理

  1. 发表文章页面, 先做弹出对话框, 拿到element静态代码, 写好验证规则, 注意文章内容部分需要下quill包, 并且文章分类和文章内容部分都需要进行触发事件表单验证, 文章封面板块的设置用URL.createObjectURL转化成URL格式赋给img的src, 点击存为草稿或发布按钮, 兜底验证并发送请求(注意这里的请求需要一个FormDate对象) 点击退出按钮, 清空所有数据, 关闭当前窗口
  2. 拿到静态表格代码, 发送请求并获取数据, 拿到静态分页代码, 并完成点击逻辑

前四个板块思路整理

  1. 做好基础文件创建和配置文件
  2. 注册页, 从element中拿到静态页面, 输入框做规则校验, 点击注册按钮兜底校验, 通过后发送请求通过后跳转至登录页, 点击去登录按钮也能直接跳到登录页
  3. 登录页, 复制注册页基础部分, 点击登录兜底校验, 发送请求, 通过后在vuex中设置全局的token(注意这里用插件实现token的本地存取), 最终跳转至main主页
  4. main主页, 进入网页需发送请求拿到用户基础信息, 渲染头像和名字, 设置/home页面为默认页面, 渲染echarts内容
  5. 基本资料页, 从element中拿到静态代码, 做规则校验, 默认渲染登录名, 点击提交修改按钮, 兜底校验发送请求并直接渲染当前页面数据, 点击重置按钮能重置表单内容
  6. 更换头像页, 点击选择图片在选取图片时触发函数, 通过FileReader将图片转成base64格式并赋值给img的src显示图片, 点击上传头像发送请求, 能直接渲染当前页面数据
  7. 重置密码页, 从element中拿到静态代码, 做规则校验, 注意这里新密码和确认新密码需要用到validator属性, 点击修改密码发送请求, 重置按钮能重置表单数据
  8. 文章分类页, 从element中拿到静态代码, 渲染表格, 点击添加分类能够弹出对话框, 拿到静态页面并做规则校验, 点击确定兜底校验后发送请求, 添加文章分类数据, 点击修改按钮, 弹出对话框并自动渲染输入框中数据, 点击确定按钮兜底校验后发送请求, 修改信息并渲染页面, 点击删除按钮, 弹出提示框点击确定后发送请求并删除当前行
  9. 文章列表页, 点击发表文章, 弹出对话框, 拿到element静态代码, 进行规则验证, 注意其中有个富文本编辑器, 需要引入quill模块, 需要手动调用表单验证, 然后后面有个文章封面也需要手动调用验证, 注意这里的文章设置可以通过将图片转成URL格式赋值给img的src, 点击发布或存为草稿能够进行兜底校验分别发送请求, 并退出当前对话框, 点击叉叉, 能弹出提示框, 点击确定后能清除数据. 分页功能的设置, 从element中拿, 每次修改页面操作能够发送请求拿到数据并渲染页面, 点击删除按钮, 弹出提示框, 并删除当前行

第五板块

CDN

CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。

AI_boom
关注
基于vue-admin-element开发后台管理系统【技术点整理】
weixin_48596030的博客
02-08 2631
基于vue-admin-element开发后台管理系统【技术点整理】
《web开发： 大事件项目：（后台开发）二》
yexiang优快云的专栏
02-04 211
3.3 重置密码 3.3.0 实现步骤 1. 定义路由和处理函数 2. 验证表单数据 // 定义 id, nickname, emial 的验证规则 const id = joi.number().integer().min(1).required() const nickname = joi.string().required() const email = joi.string().email().required() 1 2 3 4 // 验证规则对象 - 更新用户基本信息 exports...
13、Vue3 大事件管理系统
m0_51394252的博客
08-28 4648
一、大事件项目介绍 和 创建 1.1 Vue3 大事件管理系统 在线演示： https://fe-bigevent-web.itheima.net/login 接口文档: https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835 基地址： http://big-event-vue-api-t.itheima.net 1.2 pnpm 包管理器 - 创建项目 一些优势：比同类工具快2倍左右、节省磁盘空
大事件项目-vue
peng109的博客
03-08 1260
其实就是几个简单的页面， 具体页面直接参考这个博客： (59条消息) 黑马-大事件项目（总结+BUG修复）_qfc_128220的博客-优快云博客_黑马大事件项目 写起来还是比较简单的，不过还是要自己多动手。 ...
Vue项目核心要点总结
yw00yw的博客
11-19 2025
MVVM和MVC MVVM：M表示数据model，是获取到的数据。V表示视图view,是展示的界面。VM表示视图模型，用来连接model和view，是vue底层自动实现，不需要认为操作。MVVM是数据驱动的。 MVC: M表示数据model,是从后台用ajax获取到的数据。V表示视图层view，是前端渲染的页面。C表示控制器controler,用来将获取到的数据使用dom操作来更新页面，VMMC...
vue3大事件项目3
weixin_63298649的博客
04-13 738
3. el-form-item标签配置prop,用于接收参数<el-form-item label="分类别名" prop="cate_name">当你需要在表单提交时获取或验证表单项的值，就需要用到prop属性。1. form表单绑定变量和规则：<el-form :model="formModel" :rules="rules">defineEmits` 是一个组合 API，用于定义父组件可以监听的子组件事件。父组件：封装方法（getChannelList()是父组件已经封装好的方法）
大事件时间轴
04-19
NULL 博文链接：https://maoting.iteye.com/blog/1869381
vue面试题第二部分整理
03-23
Vue面试题第二部分主要涵盖了JavaScript基础到高级的概念，这些知识点对于理解和使用Vue.js框架至关重要。以下是对这些面试题的详细解答： 1. **变量的提升（Hoisting）** 在JavaScript中，变量声明（`var`，`let`...
Vue面试题整理
sinat_38412699的博客
09-27 610
Vue常见面试问题解析
web前端面试题整理(vue、uni-app、前端三件套、web基础)
m0_58122175的博客
07-24 3775
web前端面试题整理(vue、uni-app)
HTML5 大文件断点续传完整思路整理
weixin_52041354的博客
12-13 1032
前端：vue2,vue3,vue-cli,html5,webuploader后端：asp.net,jsp,springboot,php,平台：Windows,macOS,Linux,中标麒麟,银河麒麟,统信UOS,信创国产化CPU：x86,arm,龙芯(mips),龙芯(LoongArch)场景：内网，外网，政府，涉密环境，信创国产化项目数据库：MySQL,Oracle,SQL Server,达梦,人大金仓,国产数据库。
VUE-任务进程（时间轴）
10-09
公司提出一个需求，要求写一个任务进程组件用于监控工作时间内任务完成情况。包括任务状态，任务起止时间，当前时间线，任务是否延迟开始。 压缩包中不包含node_modules,请下载后自行安装相关插件
公司企业软件版本大事件时间轴记录带动画特效可折叠展开js效果.zip
07-11
公司企业软件版本大事件时间轴记录带动画特效可折叠展开js效果代码下载。一款jQuery animate动画效果制作滑动收缩展开时间轴企业发展记录历程，通过设置每个年份为标题控制，记录列表滑动收缩展开。默认下自动滑动展开时间轴大事记历程js插件。
Vue3.0项目实战（一）——Vue3 大事件管理系统项目搭建
weixin_56370772的博客
08-25 2567
如何在 git commit 前执行 eslint 检查？使用 husky 这个 git hooks 工具如何只检查暂存区代码？使用 lint-staged 工具4. 目录调整4.1 目录调整默认生成的目录结构不满足我们的开发需求，所以这里需要做一些自定义改动。主要是以下工作：删除一些初始化的默认文件修改剩余代码内容新增调整我们需要的目录结构拷贝全局样式和图片，安装预处理器支持① 删除文件② 修改内容routes: []})
【练手项目】Vue2 -大事件纪要
jiang_ziY的博客
02-01 2717
基于 externals 配置 CDN 加速,优化打包后项目的体积 安装 babel 插件,配置路由懒加载,提高 index.html 首页的打开速度
Vue3大事件管理系统
weixin_49827467的博客
07-21 708
Authorization里面放的就是token，就相当于每次发送请求的时候，拦截器都会拦截一次你的请求，来验证请求的token与储存的token是否是一致的。优化：由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用。初始化 husky 工具配置 https://typicode.github.io/husky/现在：初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一。
Vue3.0项目实战（二）——大事件管理系统登录注册功能实现
weixin_56370772的博客
08-26 1399
登录注册页面 [element-plus 表单 & 表单校验]
springboot + vue项目：大事件文章管理系统（黑马程序员）
咖啡因依赖症晚期
04-10 4970
该项目是经典的后台管理系统前后端分别使用vue和springboot首先我先进行演示一下。
vue2黑马大事件-更换密码
m0_61418032的博客
04-06 714
内联代码片。
vue2 大屏适配
最新发布
03-20
<think>好的，我现在需要帮助用户了解在Vue2中实现大屏适配的方法和最佳实践。根据用户提供的引用内容，他们提到了vue2-scale-box库和基于窗口缩放的方案。首先，我应该先整理这些信息，然后补充其他常见的方法，确保覆盖多种适配方案。 首先，用户提到的vue2-scale-box库是一个现成的解决方案，可能通过npm安装后直接使用，这应该是一个比较方便的方法。但需要详细说明如何使用，比如引入组件、设置基准尺寸等步骤。同时，引用中提到根据窗口宽度和高度计算缩放比例，并取较小的比例值，这点需要解释清楚，确保用户理解其原理。 接下来，可能需要考虑其他常见的大屏适配方法，比如rem适配、vw/vh单位、CSS3的transform缩放，或者结合媒体查询的响应式布局。这些方法各有优缺点，比如rem需要动态计算根字体大小，vw/vh单位相对于视口，而transform缩放则可能影响性能或元素的位置。 然后，需要将这些方法进行比较，指出各自的适用场景和注意事项。例如，vue2-scale-box适合快速实现整体缩放，而rem适配可能在需要精细控制时更合适。同时，最佳实践部分要强调设置基准分辨率、保持比例、处理滚动和字体，以及考虑性能优化。 在生成相关问题的时候，需要围绕这些方法展开，比如如何选择方案、如何处理滚动条、性能优化技巧，以及如何结合多种方法等。确保问题能够帮助用户深入理解不同方案的细节和实际应用中的挑战。 还需要检查是否有遗漏的重要点，比如第三方图表库的适配问题，这可能在实际项目中经常遇到，需要特别说明如何处理ECharts等库的适配，比如监听窗口变化并调用resize方法。 最后，确保回答结构清晰，分点说明，每个方法都有步骤和代码示例（如适用），并且语言符合中文习惯，避免技术术语使用不当。同时，引用标记要正确添加到对应的位置，比如引用[1]和引用[2]分别对应安装库和计算比例的部分。</think>在Vue2中实现大屏适配的核心思路是通过动态缩放页面内容来适应不同分辨率。以下是具体方法和最佳实践： ### 一、主流适配方案 1. **vue2-scale-box方案**（推荐） ```javascript import Vue2ScaleBox from 'vue2-scale-box' Vue.use(Vue2ScaleBox) // 在入口文件设置基准分辨率 Vue.prototype.$baseWidth = 1920 Vue.prototype.$baseHeight = 1080 // 页面容器使用 <vue2-scale-box :baseWidth="1920" :baseHeight="1080"> <!-- 大屏内容 --> </vue2-scale-box> ``` 原理：通过监听窗口resize事件，根据当前视口与基准分辨率计算缩放比例，取最小值确保内容完整显示[^2] 2. **CSS transform缩放方案** ```css .wrapper { transform-origin: 0 0; transition: 0.3s; } ``` ```javascript // 在mounted和resize时计算 function setScale() { const scaleX = window.innerWidth / 1920 const scaleY = window.innerHeight / 1080 document.querySelector('.wrapper').style.transform = `scale(${Math.min(scaleX, scaleY)})` } ``` 3. **rem动态计算方案** ```javascript // 设置基准rem值 const baseSize = 1920 / 100 // 19.2px // 动态设置html字体 function setRem() { const scale = document.documentElement.clientWidth / 1920 document.documentElement.style.fontSize = baseSize * Math.min(scale) + 'px' } ``` ### 二、最佳实践 1. **基准分辨率设定** - 推荐使用1920×1080作为开发基准分辨率 - 设计稿按1:1比例制作 - 特殊场景可设3840×2160（4K屏） 2. **关键处理技巧** - 添加resize监听并防抖处理 ```javascript window.addEventListener('resize', _.debounce(setScale, 200)) ``` - 保持原始比例缩放 ```javascript const scale = Math.min(widthRatio, heightRatio) ``` - 处理滚动条问题 ```css body { overflow: hidden; } ``` 3. **字体处理建议** - 固定字号使用px - 动态字号结合rem+vw ```css .title { font-size: calc(24px + 0.5vw); } ``` 4. **第三方图表库适配** ```javascript // ECharts需主动触发resize window.addEventListener('resize', () => { myChart.resize() }) ``` ### 三、方案对比 | 方案 | 优点 | 注意事项 | |----------------|-----------------------|-----------------------| | vue2-scale-box | 开箱即用 | 需处理iframe嵌套场景 | | CSS transform | 无额外依赖 | 影响部分定位布局 | | rem方案 | 响应式精细控制 | 需全rem单位开发 | [^1]: 安装命令参考vue2-scale-box文档 [^2]: 缩放比例计算逻辑说明
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值