vue 学习笔记 -- 响应式布局 移动端适配

一、 创建项目 

        1、通过脚手架cli 创建vue项目

                vue create demo-01

$ vue create demo-01

二、 项目准备

        1、amfe-flexible 插件

        安装 amfe-flexible ,并在main.js 主入口文件引入 amfe-flexible。 它会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem。

$ npm install amfe-flexible --save

 main.js

$ import 'amfe-flexible'; // 引入amfe-flexible 

        2、配置meta标签

        public文件夹index.html 配置meta标签

<header>
    <!-- 在页面 header标签中设置移动端视口-->
	<meta name='viewport' content='width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no'>
</header>

        3、postcss-pxtorem 插件

        安装 第三方插件 postcss-pxtorem 会自动将css代码中的px单位根据规则转换成rem 单位

$ npm i postcss-pxtorem@5.1.1  一般安装5.11 版本，否则可能报错

         4、配置vue.config.js文件

        在项目根目录创建vue.config.js文件，设置如下配置

module.exports = {
  lintOnSave:false,// eslint-loader 是否在保存的时候检查
  css: {
       loaderOptions: {
            postcss: {
              plugins: [
                   // 把px单位换算成rem单位
                require("postcss-pxtorem")({
                      rootValue: 192, // 换算的基数 设计稿宽度或者目前正常分辨率的1/10，375的设计稿，换算基数就是37.5，1920设计搞就是192
                      selectorBlackList: [".van"],// 要忽略的选择器并保留为px。
                      propList: ["*"], //可以从px更改为rem的属性。
                      minPixelValue: 1 // 设置要替换的最小像素值。
                  })
              ]
            }
       }
	}
}

        5、重启项目即可发现页面元素尺寸自动换算从rem单位

三 、补充

        实际重启时候遇到如下报错，原因：cli版本过高问题，卸载cli安装低版本cli重新操作一遍即可

 npm uninstall @vue/cli -g  卸载当前cli

npm install -g @vue/cli@4  安装4.x版本