vue中使用lib-flexible和amfe-flexible

1.进入项目目录安装lib-flexible

npm install lib-flexible --save-dev
npm install amfe-flexible --save-dev

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

import 'lib-flexible/flexible.js'
import 'amfe-flexible/index.js'

3.在项目根目录的index.html 头部删除自动生成的meta标签, lib-flexible会根据屏幕自动生成相对于的meta标签

// lib-flexible中删除
<meta name="viewport" content="width=device-width,initial-scale=1.0">
//amfe-flexible中不删除
<meta name="viewport" content="width=device-width,initial-scale=1.0">

4.安装px2rem-loader

npm install px2rem-loader

5.配置px2rem-loader

修改build/utils.js, 在cssLoader变量中
const cssLoader = {
    loader: 'css-loader',
    options: {
        minimize: process.env.NODE_ENV === 'production',
        sourceMap: options.sourceMap
    }
}
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
        remUnit: 75
    }
}

同时，在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader,px2remLoader]
    if (loader) {
        loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
            sourceMap: options.sourceMap
        })
    })
}

6.在vue的项目的根目录中打开 /src/HelloWorld.vue 文件，把template里面的东西全干掉，写上以下这些代码

<template>
    <div class="hello">适配移动端</div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data () {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
    width: 200px;
    height: 200px;
    font-size: 36px;
    margin: 0 auto;
    box-sizing: border-box;
    border: 1px solid green;
}
</style>