VUE移动端及PC端适配方案

Posted 2023-02-28

参考技术A

前几天开发公司产品官网的时候，遇到了一些适配问题，当时选择用postcss-px-to-viewport方案来实现适配，效果也很显著，每个页面都适配到位

step1. vue安装postcss-px-to-viewport插件。

step2. 配置适配插件的参数

使用PostCss配置文件时，在<u>postcss.config.js</u>添加如下配置：

或者在<u>package.json</u>中，添加以下配置：

说明下几个重要参数的使用：

适配存在的问题点：

注：执行指令后在package.json的devDependencies分支可以看到相应的版本，

2. 在main.js中导入lib-fixible.

如果未使用vue的伙伴可以直接在前端中直接使用阿里的CDN，如下：

注：此处是postcss-px2rem而不是px2rem-loader,网上很多文章都引用是后者，会导致在配置时候无法成功配置。
在vue.config.js中配置如下配置即可，如未有此文件请自行搜索查询创建配置。

集成以上两个步骤，基本前端即可根据屏幕自行适配，但可能有部分伙伴会遇到data-dpr始终为1，遇到这个情况多半是因为在html头中自己设置了<meta name="viewport" ...>，

查看lib-flexble做了配置，默认会根据屏幕为我们添加头文件的，如果自行设置，那么只会进行修改设置的值而已，并不会再添加，所以导致data-dpr始终为1，所以把<metaname="viewport" ...>去除.

移动端及vue相关问题

1-pc端与移动端

 PC下，html在默认情况下以可视区域宽度为基准。移动设备没有适配时，html宽度为980.

 

2-1像素还原

获取像素比： window.devicePixelRatio

计算缩放比：1 / window.devicePixelRatio

 

3-单位

px：固定值，绝对单位；%：相对单位；em：相对单位，相对于自身或者父级元素字体大小计算；rem：相对单位，只受html的字体大小的影响。

 

4-移动端的默认样式

// 处理手指按下透明遮罩层

a {

    -webkit-tap-highlight-color: transparent;

}

// 处理表单元素默认样式

input {

    -webkit-appearance: none;

}

5-vue特点

  响应式的数据绑定，数据一旦改变，视图自动更新，不需要其他额外操作；可组合的视图组件，把大功能模块分成小粒度的组件进行合理拆分及组合。

 

6-Vue生命周期

  vue实例从创建到销毁的过程，即为生命周期。开始创建->初始化数据->编译模板->挂载dom

->渲染->卸载等过程，每个过程中都可以调用各种钩子函数。

 

7-v-for指令中的key值作用

 更新已渲染过的元素列表时，默认使用就地复用策略。若删除第一条数据，vue不会重新生成新元素，而是复用第一个元素，则添加在第一个元素上的样式将不会被清除，甚至会影响页面展示效果。未了给vue一个提示，以便其能够跟踪每个节点的身份，需要为每项提供一个唯一key属性。

 

8-单项数据流

  vue采用的是单向数据流方式，数据只能从父组件流向子组件，子组件不能修改父组件传入的数据，否则vue会给予警告。

 

9-组件间的通信

  组件是独立作用域的实例，组件可复用，展示不同数据的时候，需要给组件传入数据。

  组件内部的状态改变不会影响其他组件，父组件要关心子组件状态，使用自定义事件监听。

  父组件->子组件 使用prop传递参数

  子组件->父组件 使用自定义事件监听状态变化

 

10-slot分发内容

   为了让组件可以组合，使用一种方式来混合父组件的内容与子组件自己的模板，这个过程称为内容分发。vue.js实现了一个内容分发app，使用特殊的元素作为原始内容的插槽。

   使用slot可以定制个性化组件结构。

 

11-实现子组件双向数据绑定

  让组件的v-model生效，实现双向数据绑定，则必须满足两个条件：接受一个value属性；在有新的value时触发input事件。

 

12-异步组件

   在大型应用中，可能需要将应用拆分成多个小模块，按需从服务器下载。vuejs允许将组件定义为一个工厂函数，动态地解析组件的定义。在组件需要渲染时触发工厂函数，并把结果缓存起来，用于后面的再次渲染。

 

13-vue-cli脚手架中webpack的配置分析

 

vue-cli 脚手架帮助我们写好基础代码，它具备生成目录结构、本地开发调试、代码部署、热加载、单元测试等功能。

vue-cli 是使用 webpack 做的构建工具。解读生成项目目录的配置文件源码，分析了 webpack 的基本配置，以及生成在内存文件和热加载使用的中间件。

 

 

 

 

转自：

http://mp.weixin.qq.com/s__biz=MzA3MDU0NDE5MA==&mid=2247483856&idx=1&sn=4a8baf8e21b9a343474e1bd3e649dab4&chksm=9f3a7f81a84df69765a5ec9b76d46bdfeb38d786679c7b407b12e79b2b4da7e9635d29ae4ac3&mpshare=1&scene=1&srcid=0425eW7p0Tx6c29i8WXblUbH#rd