【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑（一） 前言：学习Vue.js高仿饿了么课程过程中，总结了这个Web App项目从准备到开发完毕自己觉得很重要的知识点。这一篇主要介绍：项目准备、页面骨架开发、header组件开发。 Appheader 一、项目分析&学习目标
转载
2023-08-22 11:38:53
395阅读
页面的适配，就是一个页面能在PC端正常访问，同时也可以在移动端正正常访问。现在我们可以通过弹性布局【Flexible布局】、媒
原创
2023-10-07 10:15:10
437阅读
# 如何实现“Vue页面iOS移动端设置”
## 一、整体流程
首先，我们需要明确整个设置过程的步骤，可以用表格展示如下：
| 步骤 | 操作 |
| ---- | ---- |
| 1 | 创建Vue项目 |
| 2 | 安装vue-cli-plugin-cordova 插件 |
| 3 | 添加iOS平台 |
| 4 | 配置iOS平台设置 |
| 5 | 构建并运行项目 |
## 二
原创
2024-03-25 06:20:00
109阅读
在开发移动端应用时，准确地判断用户所使用的设备类型至关重要。这不仅影响到用户体验，也对业务的转化率产生直接影响。特别是在Vue.js框架中，如何有效地识别iOS设备就显得尤为重要。
> **用户原始反馈：**
> “我们发现使用iOS设备的用户在某些页面的体验极差，且无法正常使用一些功能。”
> **时间轴：**
> - 2023年1月：问题首次反馈
> - 2023年2月：尝试
在子页面把整个页面做绝对，覆盖整个屏幕，子父页面将 router-view 用 transition 套起来，并加上过渡动画就可以啦。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c
原创
2022-03-29 11:22:45
1585阅读
# Vue H5 iOS端页面移动优化
在现代Web开发过程中，移动端的用户体验变得愈发重要。尤其是在使用Vue.js构建H5应用时，针对iOS端的界面移动效果优化可以显著提升应用的使用体验。本文将探讨如何使用Vue.js在iOS端优化页面移动，确保更加流畅的用户体验，并且提供相关代码示例。
## 1. 理论基础
在移动端，尤其是iOS设备上，页面的触控事件和动画处理与桌面环境有着显著的不同
通常我们使用Vue来开发单页面应用（SPA）时，通常都会使用vue-router来实现页面路由跳转。单页面应用采用前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。 Vue-router提供了以下几种路由跳转方法方法作用router.push添加新路由router.replace替换当前路由router.go跳转到指定索引路由router.back返回上一个路由router.f
移动客户端的开发类型（站在前端立场上来说），主要是三种：
Native App（原生APP），也就是完全使用移动设备系统语言写的客户端，iPhone iPad就是纯Object-C，安卓就是纯JAVA, 是性能最棒的开发方式，但灵活性不好。
Web App, 就是在移动浏览器里打开的，纯HTML+CSS+JS，说白了就是个网页，只不过非常的富应用，比如手机浏览器访问的GMAIL。就是在浏览器里打开的页面。IOS支持可以在桌面创建访问的快捷方式，但是说到底还是打开Safari跑。而且对设备硬件的接口什么的挺薄弱。
Hybrid App.[HTML5 in mobile devices] 。实际上是使用原生写了一个容器，然后使用HTML+CSS+JS来实现用户界面和交互。Web App的短处便可以克服（因为自己写的容器可以辅助暴露偏底层的接口，比如本地存储或者麦克风控制之类），同时比起纯原生的java或者object-c开发灵活性要高（更新可以更快更迅速，也不依赖于市场，因为说白了，就是自己下载更新网页资源。）实际上这种方式已经不限于移动端。豌豆荚其实是个pc端的hybrid app
原创
2021-06-07 15:14:09
2387阅读
vue项目路由跳转和防止动态路由组件复用<vue-link>标签实现新窗口打开编程式导航完整代码this.$router.push({name: 'abc'})防止动态路由组件复用 标签实现新窗口打开官方文档中说 v-link 指令被 组件指令替代，且 不支持 target=“_blank” 属性，如果需要打开一个新窗口必须要用标签，但事实上vue2版本的 是支持 target=“_
1：pc端响应式开发火狐浏览器打开菜单栏，点击开发者，选择我们的响应式设计 ctrl+shiift+M谷歌浏览器点击“show console”图标，打开模拟面板，使用"User Agent"，选择所要模拟的机子，点击emulate按钮模拟，刷新浏览器。如要调整横竖屏，切换到"screen"2：新建...
原创
2022-04-06 14:24:43
1004阅读
从我工作以来，开发的一直都是移动端的页面，只有偶尔去开发几个PC端的页面，现在是一个移动端的时代，移动先行已经深入骨髓，作为一个web前端开发，如果你还在为如何开发移动端页面而迷茫，或者你还在为开发出了一个在你手机上“完美”的移动页面而沾沾自喜却不知移动的世界有多“残酷”的时候，那你应该看看这篇文章了。希望这能给你帮助，同时也能给我帮助，有不合理的地方，欢迎评论支持，必将改正。这里是基础，你了解否
转载
2024-06-18 22:02:03
32阅读
负责一个项目pc端的，再上线以后呢，想兼容移动端。用同一套页面 1.方法1 定义视口窗口，简单，可以在手机上看到一个缩小版的pc端
原创
2022-07-06 11:50:40
847阅读
8 个月前Mint UIGitHub：github.com/ElemeFE/mint项目主页：mint-ui.github.io/#Demo：elemefe.github.io/mint-文档：mint-ui.github.io/docs/#由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库。自 6 月初开源以来，根据社区和团队内部的反馈，修复了一些 bug 并新增了
Pagination.
vue<template><div id="pagination" :style="{'justify-content':textAlign}"> <div> <div> <span class="pages">共 {{allCounts
原创
2021-09-09 14:21:19
563阅读
Pagination.
vue<template><div id="pagination" :style="{'justify-content':textAlign}"> <div> <div>
原创
2022-03-04 13:37:54
307阅读
这里我写一下我自己用的vue 移动端适配 ，可能跟别人的不一样。但是效果是一样的。我
转载
2023-02-27 15:46:50
733阅读
一般情况下如果全部应用CDN或者直接全局使用，直接根据文档就行，我这里重点讲一下这个UI的框架按需引入以及REM适配（官网也有提到，只不过有点模糊，新手入门要研究一会，我只是阐述重点，以提高效率），下面开始：第一步不用说照着官网进行安装，NPM或者是yarn，都是可以的npm i vant -S
or
yarn and vant安装之后我们在babel.config.js中进行配置插件：mod
移动端开发模板：750的稿子除以75：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer
转载
2023-07-02 23:56:09
146阅读
目的：学习移动端场景下的js事件；制作移动端特效常用的js库；介绍移动端常用开发框架Bootstrap；介绍动态样式语言less、sass、stylus的基本使用。移动端js事件移动端的操作方式和PC端是不同的，移动端主要用手指操作，所以有特殊的touch事件，touch事件包括如下几个事件：1、touchstart: //手指放到屏幕上时触发2、touchmove: //手指在屏幕上滑动式触发3
转载
2023-12-10 17:12:45
62阅读
