vue2.x+vantUI搭建移动端并适配750设计稿

---

前言

本文在已安装node、npm、vue-cli等前提下进行，请确保自己的node -v,npm -v和vue -V是正常显示版本的，具体操作可查看下面链接

---

一、学习目标

搭建vue移动端项目框架
vantUI按需引入开发
设配750设计稿

二、创建vue项目

1.windows环境下搭建vue开发环境

windows环境下搭建vue开发环境

2.安装和引入vant

vant官网

# 安装
vue2.x：npm i vant@latest-v2 -S
vue3：npm i vant -S

# 引入——按需引入（按需引入之后就不能再进行全局引入）
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

3.适配处理

//vue页面，只有div适配了
<template>
  <div class="main">
    <div class="fz">适配了吗？</div>
    <van-button plain type="info" size="small">一个按钮</van-button>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
  </div>
</template>

//.postcssrc.js
const path= require('path');
module.exports = {
    "plugins": {
      "postcss-import": {},
      "postcss-url": {},
      "autoprefixer": {
        browsers: ['Android >= 4.0', 'iOS >= 8'],
      },
      'postcss-pxtorem': {
        rootValue({file}){
          return file.includes(path.join('node_modules', 'vant')) ?37.5:75
        },
        propList: ['*'],
      },
  }
}
// module.exports = ({
//   file
// }) => {
//   // vant 是375px的设计稿，我们是750的设计稿，所以需要判断
//   const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 37.5 : 75.0;
//   return {
//       plugins: {
//           autoprefixer: {
//               browsers: ['Android >= 4.0', 'iOS >= 8'],
//           },
//           'postcss-pxtorem': {
//               rootValue: designWidth,
//               propList: ['*'],
//           },
//       },
//   }
// };