vue-cli使用flexible

833e5c3f681b228116cdfee55979639f.png

以前项目上用到这个,网上教程很多,但是说法都不一样,自己总结的,如果有不对的地方可以提出来,

vue-cli flexible

1、index.html引入flexible

    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/makegrid.js"></script>

2、安装依赖

    npm install postcss --save

    npm install postcss-loader --save

    npm install postcss-px2rem --save

3、build里面修改vue-loader.conf.js文件

    var utils = require('./utils')

    var config = require('../config')

    var isProduction = process.env.NODE_ENV === 'production'

    module.exports = {

        loaders: utils.cssLoaders({

            sourceMap: isProduction ?

                config.build.productionSourceMap : config.dev.cssSourceMap,

            extract: isProduction

        }),

        preserveWhitespace: false,

        postcss: [

            require('autoprefixer')({

                browsers: ['last 3 versions'],

                remove: false

            }),

            require('postcss-px2rem')({

                remUnit: 75

            })

        ]

    }

4、字体大小直接用px

    /*px*/ 自动生成适应屏幕的大小

    /*no*/ 不修改。显示原有大小

posted @ 2022-05-31 18:11  青年码农  阅读(192)  评论(0编辑  收藏  举报