Vue移动端适配方案.md

Posted 2021-01-09 vipinchan

移动端主要采用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>