vue-cli 移动适配插件安装

vue-cli移动适配插件安装

安装模块

• amfe-flexible：监听你屏幕大小改变的时候，更改根节点html大小
• postcss-pxtorem：自动将项目中的px单位转化成rem单位

cnpm i amfe-flexible postcss-pxtorem --save

插件配置步骤

1. 在main.js中引入amfe-flexible模块

   import 'amfe-flexible/index'
   

2. 在vue.config.js文件里配置插件

`

// 将px转化为rem单位得插件导入
const pxtorem = require('postcss-pxtorem')
const autoprefixer = require('autoprefixer')

// 配置当前项目的启动配置
module.exports = { // 导出当前模块
    // 服务器代理解决跨域问题
    devServer:{
        host:'localhost', // 本机地址
        port:'8080',
        proxy:{ // 代理
            '/api':{ // 代理域名的缩写
                target:'http://open.douyucdn.cn', // 代理服务器域名
                changeOrigin:true
            }
        }
    },
    css:{
        loaderOptions:{
            postcss:{
                plugins:[
                    autoprefixer({
                        browsers:['Android >= 4.0','ios >= 7']
                    }),
                    pxtorem({
                        // rootValue配置的值就为75 *10
                        // 一般来说UI设计图有两个尺寸，750px,375px 
                        // 导入移动端ui库的时候，一般使用rootValue的值：一般为37.5
                        rootValue:75,
                        propList:['*']
                    })
                ]
            }
        }
    }
}`