vue项目搭建并配置移动端自适应

最新推荐文章于 2024-07-22 10:34:10 发布

celestine113

最新推荐文章于 2024-07-22 10:34:10 发布

阅读量1k

点赞数

分类专栏： vue 移动端

本文链接：https://blog.csdn.net/qq_41194534/article/details/88395616

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

移动端

1 篇文章 0 订阅

订阅专栏

加粗样式

1. 开发环境安装

npm install -g cnpm --registry=https://registry.npm.taobao.org  全局安装淘宝镜像

cnpm install --global vue-cli
vue init webpack my-project
cd my-project 
cnpm install 
cnpm run dev

2.使用rem 布局，安装flexible

npm i lib-flexible --save

3.在main.js引入lib-flexible

  import 'lib-flexible'

4.添加根目录index.html中添加meta标签

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

5.将px转rem 安装px2rem-loader

  npm i px2rem-loade --save-dev

6.配置px2rem-loader build/utils.js

var cssLoader = {
  loader: 'css-loader',
  options: {
    minimize: process.env.NODE_ENV === 'production',
    sourceMap: options.sourceMap
  }
}
var px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 100
  }
}
function generateLoaders(loader, loaderOptions) {
  var loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
}

7.使用px2rem外部引用css时没有将px 转为rem，所以需要在node_modules

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width /7.5;   //将10改为7.5
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

这样设置完。外部css要使用1re100px,内部直接使用px自动编译