vuejs第二篇 vue-cli配置移动端自适配（引入flexible）

最新推荐文章于 2024-06-03 20:21:49 发布

胖姗_Shirleyzhao

最新推荐文章于 2024-06-03 20:21:49 发布

阅读量5.8w

点赞数 4

分类专栏：框架-vuejs 文章标签： vuejs px2rem-loader

框架-vuejs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

原文网址

http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/

1.安装lib-flexible

     
     
      
      npm i lib-flexible --save
     
     
     
     

     
     
     
     
      
      2.在项目入口文件main.js中引入lib-flexible 
     
     
     
     

     
     
     
     
      
      
      
      import 'lib-flexible/flexible.js'
      
      

     
     
     
     

     
     
     
     

     
     
     
     
      
      3.在项目根目录的index.html 头部加入手机端适配的meta的代码
     
     
     
     
      
      

     
     
     
     
      
                 
           
            
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
           
           
           
           
            
            

           
           
      
      4.安装px2rem-loader
     
     
     
     
      
      

     
     
     
     
      
      在实际的开发中，使用flexible插件时  会自动把px转换成rem单位。在vue-cli中安装过lib-flexible之后 ，将px转换成rem，我们将使用px2rem这个工具， 它有webpack的loader： https://github.com/Jinjiang/px2rem-loader （这是px2rem-loader的github地址） 
     
     
     
     
      
             注：我这个步骤和头部原文链接  所使用的方法 是不一样的  ，因为我使用原文链接的命令时出错了  ，
     
     
     
     
      
                      
     
     
     
     
      
      

     
     
     
     
      
            
      
       所以我使用了  github上面的安装命令：npm install px2rem-loader

5.配置px2rem-loader

在vue-cli生成的webpack 配置中，vue-loader 的options和其他样式文件loader 最终都是由build/untils.js里的一个方法生成的。

我们只需要在cssLoader后面加上一个px2remLoader即可，px2rem-loader的remUnit 选项意思是1rem=多少像素，结合lib-flexible，我们将px2remLoader的option.remUnit 设置成设计稿宽度的1/10，这里我们假设设计稿的宽度为750px ,并将px2remLoader 放进loaders数组中

var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}