如何搭建vue手机适配项目

第一步 环境搭建

npm install -g @vue/cli //安装vue脚手架

第二步 初始化

vue init webpack demo-project

配置项如图

image.png

标红部分可以自行学习并安装使用，不做赘述

第三步 项目配置

1.修改访问路径

dev>host=>'127.0.0.1',port=>'8089' //防止与其他项目冲突

image.png

下面配置项是手机h5页面适配配置

2.安装sass与px2rem

//有必要可以使用cnpm代理，方法百度 cnpm
npm install node-sass --save-dev
npm install [email protected] --save-dev //8.x版本不兼容
npm install style-loader --save-dev   
npm install sass-resources-loader --save-dev
npm i lib-flexible --save
npm i px2rem-loader --save

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

import 'lib-flexible/flexible'

3.引入hotcss

下载hotcss https://github.com/imochen/hotcss，将下图文件放到assets下

image.png

新建main.scss，文件位置如上

@import "./hotcss/px2rem.scss";
$designWidth:750;

修改build/utils

  // const cssLoader = {
  //   loader: 'css-loader',
  //   options: {
  //     sourceMap: options.sourceMap
  //   }
  // }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
  const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      //一般设置75
      remUnit: 75
    }
  }

  //function generateLoaders (loader, loaderOptions) {
   // const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

scss: generateLoaders('sass').concat(//使用concat引入main.scss
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/css/main.scss')
        }
      }
    ),

修改根目录的index.html添加meta
导致第三方的ui会变形的问题请参考https://www.jianshu.com/p/2614459192b0

4.结果

image.png

image.png

从图上可以看出我们将$designWidth设置为750px，remUnit:75，所以页面整体宽度为10rem,类hello的样式宽度为375px,所以折算成5rem正好一半，到此一个手机适配的VUE项目搭建完毕。