vue移动端适配插件lib-flexible

使用vue-cli安装好一个vue的项目

1. npm install -g vue-cli
2. vue init webpack my-project
3. cd my-project
4. npm run dev

配置vue插件 lib-flexible

1. 安装插件 lib-flexible

   npm i lib-flexible --save-dev

   2. 在main.js中引入lib-flexible

   import 'lib-flexible/flexible'
   

   3. 安装px2rem loader

   npm install px2rem-loader --save-dev
   

   4. 配置px2rem-loader
      在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：

   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
           })
         })
       }

    

   5.在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>

   在这里，我们设置了一个div的宽度是200px，接下来我们来查看div在不同分辨率手机下显示的情况
   iPhone6（屏幕宽度为375px）

   iPhone6px（屏幕宽度为414px）

   iPhone5

    

    

   注意：

   1.此方法只能将.vue文件style标签中的px转成rem，不能将script标签和元素style里面定义的px转成rem

   2.如果在.vue文件style中的某一行代码不希望被转成rem，只要在后面写上注释 /* no*/就可以了

   结论

   1.使用了vue的lib-flexible后，给div设置了一个宽度，它会跟手机分辨率大小自动调节

   2.当设置手机屏幕大小为375时，它的宽度是100px，说明设计稿是按照750px来设计的，375刚好是一半

   
   
   
   

转载于:https://www.cnblogs.com/liuhan0727/p/11281566.html