作者：清风皓月一.涉及技术点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端适配方案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及生态更新太快，控制好
之前主流移动端适配方案是lib-flexible+postcss-pxtorem，但是这样的方案会存在一定的问题：两个插件需要配套使用，而且rootValue设置的值不好理解rem是相对于html元素字体单位的一个相对单位，从本质上来说，它属于一个字体单位，用字体单位来布局，并不是太合适另一种流行的移动端适配方案：安装： npm install postcss-px-to-viewport --s
前言因为移动端设备屏幕尺寸非常多，碎片化严重。为了兼容市面上的不同手机，我们要给我们的项目中去进行响应式布局。rem适配方案原生rem写法注意： 1rem 的大小 = 根元素html的font-size的字体大小<script>
// 页面重置事件
get()
window.onresize = function() {
get()
}
接上文，开始准备布局页，见下图，包括顶部一个头部和一个底部导航。1、在we-vue组件库中找到对应的组件 1)头部，包括网站logo和【注册|登陆】按钮，这对应着we-vue组件库的Header组件2）底部导航，包括【首页、所有商品、购物车、我】 四个菜单项，这对应着we-vue组件库的Tabbar组件 这两个组件都位于官方文档的【导航相关】目录下，we-vue是所有基于weu
在实际开发中，我们浏览网页，网页顶部的导航栏Header和侧边的菜单栏Aside，以及底部的footer等内容往往是不发生改变的，如果在每次页面跳转、提交表单后都去重写这部分是很麻烦的，而Element-Plus为我们提供了封装好的标签，让我们能够通过组件化来实现页面的布局。注意！将这些封装成组件后使用会出现错位的问题 出现这个问题的原因是封装成组件后，<el-container&
转载
2024-10-12 16:07:05
243阅读
常用的解决移动端布局的方案大概有：1.flex弹性布局1）高度定死，宽度自适应，元素都采用px做单位。2）随着屏幕宽度变化，页面也会跟着变化，效果就和PC页面的流体布局差不多，在哪个宽度需要调整的时候使用响应式布局调调就行（比如网易新闻），这样就实现了『适配』。2.百分比3.用框架搭建页面4.viewport适配4.1 优点：1）避免复杂的计算，直接使用UI的标准像素值4.2 缺点：2）不能使用m
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
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阅读
vue项目pc端和移动端适配1、pc端适配一、样式中根据设计稿确定缩放比例（可以设置全局或者部分页面）二、监听窗口大小改变，设置根字体大小 created() {
// 获取当前设备的宽度，设置rem的根字体大小
let width = window.innerWidth;
width = width <= 1200 ? 1200 : width;
const htmlObj = d
转载
2024-05-21 10:54:56
2695阅读
使用lib-flexible和px2rem实现移动端和PC端界面适配注释：lib-flexbles是由阿里团队很早提出解决屏幕分辨率适配的问题、现已不被推荐（因为目前比较主流的适配方案是使用vw和vh的方式进行适配）、lib-flexble是根据屏幕的大小自动分配对应的font-size大小，px2rem是将项目中所书写的所有px单位转换成rem单位。 故当前所使用的适配方案其根本用的还是rem实
转载
2024-09-11 07:26:11
751阅读
本文简单介绍一下vue项目移动端的rem适配准备。首先移动端肯定用的是vant组件库，在开发移动端之前，通常要做好rem适配，当然也可以的vw适配，这里简单介绍一下rem适配。首先看一下vant官网上的介绍需要这两个插件：步骤一：安装 npm i amfe-flexible步骤二：引用 （在main.js里面引用一下下）import 'amfe-flexible'步骤三：看效
转载
2024-04-07 13:07:12
639阅读
Vue 最独特的特性之一，是其非侵入性的响应式系统。众所周知，Vue的数据双向绑定给前端工作人员带来了极大的便捷。响应式系统使得开发人员只需要关注数据而无需手动控制dom来操作视图。假设 total = x * y当数据 x 改变时，Vue会帮助我们更改视图中所有的 x 及 total 等。那么在这个无比顺滑的过程中，Vue内部是如何做到的呢？答案是：数据拦截/数据代理依赖收集发布订阅翻译成人话就
在页面引入这段js代码(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' :
原创
2021-06-29 10:17:13
258阅读
在页面引入这段js代码(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {
原创
2021-06-29 10:17:13
94阅读
由于内容较多，我将其分为了里两部分：Vue3较Vue2的更新内容（一）>>>18、按键修饰符变更vue3将不再支持使用数字 (即键码) 作为 v-on 修饰符，不再支持 config.keyCodes 在 Vue 2 中，keyCodes 可以作为修改 v-on 方法的一种方式。<!-- 键码版本 -->
<input v-on:keyup.13="submit
Windows系统一、先下载node.js，为了之后可以使用npm命令下载第三方包下载地址：建议安装LTS版本Download | Node.js二、安装淘宝镜像（因为经常下载第三方包速度比较块-节省时间）（设置淘宝镜像：大家都知道国内直接使用 npm 的官方镜像是非常慢的，所以这里推荐使用淘宝 NPM 镜像。）使用管理员身份打开cmd，在打开的命令行界面输入：三、接着安装vue和vu
Webpack+Vue-router的架构方式Vue-cli安装省略（vue-cli搭建）ElementUI库（pc端）的引用（见下文）打包（项目完成后打包放服务器）在项目目录下运行 npm run build 运行完成之后会在项目里面增加一个dist的目录，直接把这个目录丢给服务器就好了，dist目录的名字可以自定义在配置文件里面 上面1、2项完成好后，在命令框
