Vue中web端全局自适应

需求：是实现全局页面中字体自适应。

警告：下面实现主要是在Vue中进行配置的，把全局中的px转换成rem进行实现自适应窗口变化。

一、实现方式：

1、下载所需插件

pnpm install lib-flexible-computer -S 
pnpm i px2rem-loader -D
pnpm install postcss-px2rem-exclude -D

2、在main.js进行全局引入

import 'lib-flexible-computer'

3、在vue.config.js中引入并设置基础size

  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px2rem-exclude")({
            remUnit: 192, // 基准大小，适应于初始化窗口宽度1920，需要自己根据自己需求调整
            exclude: /node_modules/i， // 排除对UI组件size的影响
          })
        ]
      }
    }
  },

以上就是挣调整过程下面来总结下这个开发过程中遇到的问题及解决思路。

遇到问题解决思路总结：

     1、首先碰到页面整体随着窗口变化，当窗口变化过小时，ui组件简直不能看；产生问题原因解决方案：

       此问题刚开始时使用的是postcss-px2rem插件去实现size转换，起对ui组件也生生效但是ui组件中有好多行内样式不好一一去调整，所以只能舍弃对ui组件的自适应，只能弃用该插件，使用postcss-px2rem-exclude插件利用exclude去排除ui组件，涉及代码行在上面有注释，这边不做重复介绍

     2、因为是后期维护项目所以开始弄时发现好多地方没生效，一排查是因为好多写的行内样式，该方法对行内样式失效；

     3、进行代码推送时，产生拉LF will be replaced by CRLF in等相关warning；产生问题原因解决方案：

        LF和CRLF都是换行符，但LF是linux和Unix系统的换行符，而CRLF是window 系统的换行符。这产生了跨平台的协作的项目中保存文件使用哪个个标准的问题， git为了解此问题，提供了”换行符自动转换“的功能，且此功能是默认处于”自动模式“（开启）的。

       此功能会自动帮你把代码里与你当前操作系统不同的换行的方式转换成当前系统标准的换行方式（LF与CRLF之间的转换），因此当提交代码时，即便没有手动调整某文件，也会被git认为修改了，就会提示"LF will be replaced by CRLF in ..."。

       解决方案：

git config core.autocrlf false // 仅当前git仓库生效
git config --global core.autocrlf false // 全局有效，不推荐使用

其实只是warn警告，没必要去调整，因为设置了false就关闭了换行自动转换功能，但是你不能保证以后不会在其他系统使用，进行忽略就可以拉，不会对该项目产生影响的。