vue-cli3项目使用lib-flexible结合px2rem移动端适配......

最新推荐文章于 2024-07-23 11:25:38 发布

追逐ぢ

最新推荐文章于 2024-07-23 11:25:38 发布

阅读量1.3k

点赞数 2

分类专栏： web技术栈文章标签： javascript vue-cli3 vue web

本文链接：https://blog.csdn.net/weixin_43330752/article/details/87855595

版权

web技术栈专栏收录该内容

47 篇文章 1 订阅

订阅专栏

1:执行npm命令

npm install postcss-pxtorem --save-dev
或者：
npm install postcss-px2rem --save-dev2

postcss-px2rem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据<html>标签的font-size值来计算出结果，1rem=html标签的font-size值。

2:引入lib-flexible

在项目入口文件main.js 中引入lib-flexible

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import './static/css/reset.css'
import 'lib-flexible/flexible.js'
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

注意事项（important）: 由于flexible会动态给页面header中添加<meta name='viewport' >标签，所以务必请把目录 public/index.html 中的这个标签删除！！！

3: 配置postcss-px2rem

vue-cli3 构建的项目相较于vue-cli2 构建的项目精简了许多，将一些默认配置进行了更好更严密，让开发变得更高效的封装。具体请看vue-cli官网 https://cli.vuejs.org/zh/guide/

px2rem的配置放在vue-cli3 项目中vue.config.js中（找不到？可能你是一个新构建的项目，需要手动在项目根目录创建vue.config.js）

具体配置内容如下：

postcss-pxtorem 在postcss.config.js中配置

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

或者postcss-px2rem

css: {
     // 是否使用css分离插件 ExtractTextPlugin
     //extract: true,
     // 开启 CSS source maps?
     sourceMap: false,
     // css预设器配置项
     loaderOptions: {
        css: {},
        postcss: {
          plugins: [
            require('postcss-px2rem')({
              remUnit: 37.5
            })
          ]
        }
     },

重启项目，两个用于移动端适配的包就这样可以愉快的开始使用了！！！