三、个人中心TabBar 处理通过分析页面，我们可以看到，首页、问答、视频、我的 都使用的是同一个底部标签栏，我们没必要在每个页面中都写一个，所以为了通用方便，我们可以使用 Vue Router 的嵌套路由来处理。父路由：一个空页面，包含一个 tabbar，中间留子路由出口子路由
首页问答视频我的一、创建 tabbar 组件并配置路由这里主要使用到的 Vant 组件：Tabbar 标签栏1、
转载
2024-04-11 11:24:50
129阅读
文章目录前言一、使用插件① 纯wap项目效果：Demo：② pc&wap混合项目（我放弃了）二、老方案效果：Demo： 前言最近在给公司内部做一个BBS论坛，需要在电脑和手机上都可以操作，所以需要做移动端的适配，下面是我在开发后觉得不错的一些解决方案，分享给大家。一、使用插件在vue2的时候我们可以使用lib-flexible + postcss-pxtorem 去对移动端进行适配，不过
转载
2023-09-21 12:52:20
501阅读
前言因为移动端设备屏幕尺寸非常多，碎片化严重。为了兼容市面上的不同手机，我们要给我们的项目中去进行响应式布局。rem适配方案原生rem写法注意： 1rem 的大小 = 根元素html的font-size的字体大小<script>
// 页面重置事件
get()
window.onresize = function() {
get()
}
手淘适配解决方案阿里巴巴淘宝团队出品的amfe-flexible是一个用于解决移动端不同机型适配的包。在其源码中，通过不同屏幕的像素比来设置scale值，保证当前窗口的device-width始终等于物理像素设备的宽度。从而达到不同机型的适配效果。当然，要达到完全适配，我们不仅仅只用到amfe-flexible还需要用到postcss-pxtorem。postcss-pxtorem是将我们在css
转载
2024-09-21 08:50:02
145阅读
之前主流移动端适配方案是lib-flexible+postcss-pxtorem，但是这样的方案会存在一定的问题：两个插件需要配套使用，而且rootValue设置的值不好理解rem是相对于html元素字体单位的一个相对单位，从本质上来说，它属于一个字体单位，用字体单位来布局，并不是太合适另一种流行的移动端适配方案：安装： npm install postcss-px-to-viewport --s
1. v-bind 样式绑定变量<template>
<div class="text">hello</div>
</template>
<script setup lang="ts">
const color = ref('red');
</script>
<style>
.text {
co
vue项目移动端、pc端适配方案lib-flexible 根据屏幕宽度，自动设置html的font-sizepostcss-px2rem 自动将px单位转换成rem一、第一步先安装 flexible和 postcss-px2rem（命令行安装）npm i lib-flexible -S
npm i postcss-px2rem -S简要介绍这两个包的用途：flexible会为页面根据屏幕自动添
转载
2024-10-08 19:47:09
751阅读
vue移动端模板tip：1、ui我们使用的是vux，庆幸的是，解决了打包过大的问题，2、这里使用的是rem布局，移动端还是要使用ipad和不同尺寸的手机3、版本：webpack:3.6.0 vue:2.5.2 vue-loader:13.3.0 vux:2.8.1 vux-loader:1.2.7 版本很重要，版本很重要，版本很重要，vue及生态更新太快，控制好
关于如何在移动端 iOS 中使用 Vue3 实现视频预览的技术细节，下面是一个详细的复盘记录，内容涵盖环境准备、分步指南、配置详解、验证测试、优化技巧以及排错指南等部分。
### 环境准备
在开始之前，我们需要准备好相关的开发环境和前置依赖。确保你已经安装 Node.js 和 Vue CLI。可以通过以下命令安装：
```bash
npm install -g @vue/cli
```
#
作者：清风皓月一.涉及技术点vite版本vue3ts集成路由集成vuex集成axios配置Vant3移动端适配请求代理二.步骤vite+ts+vue3只需要一行命令npm init @vitejs/app my-vue-app --template vue-ts配置路由npm install vue-router@4 --save在src下新建router目录，新建index.ts文件import
vue项目pc端和移动端适配1、pc端适配一、样式中根据设计稿确定缩放比例（可以设置全局或者部分页面）二、监听窗口大小改变，设置根字体大小 created() {
// 获取当前设备的宽度，设置rem的根字体大小
let width = window.innerWidth;
width = width <= 1200 ? 1200 : width;
const htmlObj = d
转载
2024-05-21 10:54:56
2691阅读
在移动端开发中，特别是针对Vue3框架的应用，iOS设备的滚动条处理一直是开发者面临的挑战。滚动体验的流畅性直接影响用户的使用感受。本文将以复盘记录的形式，详细探讨“vue3 移动端ios滚动条”的解决方案，涵盖版本对比、迁移指南、兼容性处理、实战案例、性能优化和生态扩展等模块。
## 版本对比
首先，我们需要明确不同版本之间的兼容性分析。下面是对Vue3和其前一个版本Vue2的对比。
``
上传功能在项目开发中，上传文件的应用场景非常的多，一般情况下，上传的接口都是由公司内部自己开发一套适用于任何场景都可以使用的接口，但是这意味着该接口所涉及到的工作量与技术点就非常的多，且不稳定。于是大公司选择了前者自己研发，小公司则选择了性价比更高的第三方云存储服务，国内知名的云技术服务商基本上是 阿里云 和 腾讯云。以下是腾讯云存储 COS 基本使用流程：腾讯云存储COS **对象存储（Clou
vue-cli3.0实现移动端自适应，亲测有效项目使用vue3.0编写代码，说要打包成apk文件，在安卓上看，现在需要适配移动端的样式，记录一下，亲测有效。安装插件vue脚手架略过lib-flexible : 会自动在html的head中添加一个<meta name="viewport">的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根
转载
2024-09-12 06:54:09
153阅读
学习一下
转载
2021-06-29 16:17:00
458阅读
1. 项目初始化 新建项目 vue create myProject 使用UI组件库 Vant（下面是全局引入，按需引入看文档） npm i vant@next -S // main.js import Vant from "vant"; import "vant/lib/index.css"; / ...
转载
2021-10-11 03:45:00
329阅读
2评论
transition过渡属性属性描述值举例transition简写，包含4个过度属性transition:width 1s linear 1s;transition-propertycss属性的名称all:所有属性都将获得过渡效果。transition-property:height;transition-duration过渡效果花费的时间，默认0transit
安装lib-flexible1、npm install lib-flexible --save2、import 'lib-flexible' 在 main.js中引入 通过以上两步，就完成了在vue项目使用lib-flexible来解决移动端适配问题了。lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-si
2021年九款vue3 UI框架1. Ant Design Vue2. BalmUI3. Wave UI4. Vuestic5. Element+6. Ionic7. Naive UI8. Quasar9. PrimeVUE 注：排名不分先后 注：文章来源于公众号《前端新世界》 1. Ant Design Vue官方网站：http://2x.antdv.com/components/over
转载
2023-12-26 19:15:05
407阅读
Vue3 有没有一款好用的开发原生的工具 1.uniapp 我个人认为uniapp 适合开发小程序之类的，用这个去开发原生应用会存在一些问题 性能限制：由于 Uniapp 是通过中间层实现跨平台，应用
原创
2023-07-29 19:55:35
1486阅读
