vue移动端登陆页面_vue项目移动端搭建

vue项目移动端搭建

首先预祝大家七夕快乐，七夕节，是中国民间的传统节日。七夕节由星宿崇拜衍化而来，为传统意义上的七姐诞，因拜祭七姐活动在七月七晩上举行，故名七夕。

七夕

HAPPY

QIXI DAY

快乐

言归正传，我们还是把之前搭建好的vue项目运行打开

在google浏览器点击分F12可以查看布局

我们把这里的布局和图片都删除掉，APP.vue和HelloWorld.vue

这样保存刷新，顺便点击浏览器旁边的手机模式按钮

我们会得到一个很干净的页面，只有我们写的HelloWorld的文字

为了我们之后编写内容的方便，我们需要先导入一些第三方的插件

VUE移动端适配：VUE使用flexible布局

安装lib-flexible

我们在项目目录中用命令行运行 npm i lib-flexible --save

安装完成之后，我们在项目入口文件main.js里引入lib-flexible

meta标签处理，在index.html中

打开网页，则自动以原始比例显示，并且不允许用户修改

    name="viewport"

    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"

  />

px转rem

我们工作中一般得到的设计图的单位都是px，我们可以用工具把px自动转为rem

px2rem-loader

安装px2rem-loader

老规矩，命令号运行 npm install px2rem-loader --save-dev

 build/utils.js中 需在 cssLoader 后再加上一个 px2remLoader 即可，px2rem-loader 的 remUnit 选项意思是 1rem=多少像素，假定设计稿750px，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10，也就是75，baseDpr默认是2，这样会导致字体不正常，比如设置12px，在pdr为2的时候应该是24px才正常显示，但是默认Dpr如果为2，则转化后的字体显示为12px，就会比预想的小

/**

   * 适配移动端 lib-xxxx

   */

  const px2remLoader = {

    loader: 'px2rem-loader',

    options: {

      remUnit: 75, // 设计稿除以10得到的值

      baseDpr: 1 // 默认dpr是2，设置成1，才能保证字体正常

    }

  }

并放进loaders数组中

// generate loader string to be used with extract text plugin

  function generateLoaders (loader, loaderOptions) {

    /**

   * 适配移动端 lib-xxxx

   */

    // const loaders = [cssLoader, px2remLoader]

    // const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

修改配置后需要重启，然后我们在组件中写单位直接写 px，设计稿量多少就可以写多少了

Happy QIXI DAY