Vue移动端适配方案.md

Posted vipinchan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue移动端适配方案.md相关的知识,希望对你有一定的参考价值。

移动端主要采用rem布局,vue+webpack,通过webpack编译,将css中px自动转成rem或其它单位,这里采用px2rem-loader进行转换,最后引入lib-flexible,实现不同设备不同分辨率的弹性适配。

实现步骤

第一步:引入lib-flexible

# 下载lib-flexible
npm i lib-flexible --save

# 在vue入口main.js导入
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘@/router‘
import ‘lib-flexible/flexible‘

Vue.config.productionTip = false

import ‘@/assets/global.less‘

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘
})

第二步:引入px2rem-loader

# 下载px2rem-loader
npm install px2rem-loader --save-dev

# utils.js中配置loader
const px2remLoader = {
    loader: ‘px2rem-loader‘,
    options: {
      remUnit: 75
    }
  }
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

支持less

引入less-loader

npm install less less-loader --save-dev

注:以上方案,只能转换vue文件中style里的css,对于内联样式无能为力。内联样式以及组件间传参的css,只好另外想办法,可以重写loader,通过正则匹配后进行转换。

<template>
  <div class="template-view">

  </div>
</template>

<script>
export default {
  name: ‘template‘,
  components: {},
  data () {},
  methods: {}
}
</script>

<style scoped>
</style>

以上是关于Vue移动端适配方案.md的主要内容,如果未能解决你的问题,请参考以下文章

vue适配不同屏幕大小_移动端适配的几种方案

[New]Vue项目使用vw实现移动端适配教程

VUE移动端及PC端适配方案

如何在Vue项目中使用vw实现移动端适配

vue移动端项目中使用postcss-pxtorem进行适配方案

Vue.js 移动端适配之 vw 解决方案