vue-cli使用flexible

举报
青年码农 发表于 2022/08/25 00:34:49 2022/08/25
【摘要】 以前项目上用到这个,网上教程很多,但是说法都不一样,自己总结的,如果有不对的地方可以提出来, vue-cli flexible 1、index.html引入flexible     <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??f...

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*/ 不修改。显示原有大小

文章来源: blog.csdn.net,作者:NMGWAP,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/NMGWAP/article/details/125066894

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。