手把手教你构建vue项目（微信h5以及hybrid混合开发）（二）——安装移动端常用ui和全局公共样式以及适配的设置

这一篇主要是安装移动端常用ui和全局公共样式以及适配的设置。
开发工具：vscode，
包安装工具：yarn
这里补充下，scss是在使用vue-cli4.0创建项目的时候就直接勾选dart-sass的。

一、确认我们要使用的ui框架

移动ui框架市面上有很多，这里就不一一举例了。我在挑选的时候主要看这个框架在github上的最近提交时间和修复时间，以及框架的人气和活跃度，看这些的原因，就是因为怕有些框架停止维护很多坑没必要去踩，选那些一直在维护的ui框架反而更好些。我这里采用的有赞的vant中文地址，做一般的项目都可以。
直接yarn add vant 就可以了，
main.js中使用，可以把通用的组件放到全局

import Vue from 'vue'
import {
  Toast,
  List,
  Dialog,
  Stepper,
  ActionSheet,
  Overlay,
  Slider,
  Tab,
  Tabs,
  Popup,
  Sticky,
  Swipe,
  SwipeItem,
  CountDown
} from 'vant' // 全局引入vant样式

Vue.use(Toast)
  .use(List)
  .use(Dialog)
  .use(Stepper)
  .use(ActionSheet)
  .use(Overlay)
  .use(Slider)
  .use(Tab)
  .use(Tabs)
  .use(Popup)
  .use(Sticky)
  .use(Swipe)
  .use(SwipeItem)
  .use(CountDown)

在根目录下的babel.config.js文件中添加vant按需加载

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  // 设置vant自动按需加载
  plugins: [
    [
      'import',
      { libraryName: 'vant', libraryDirectory: 'es', style: true },
      'vant'
    ]
  ]
}

二、移动端自适应处理。

1.先安装postcss-px-to-viewport

yarn add postcss-px-to-viewport -D

2.在根目录下新建postcss.config.js

 plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
      viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      viewportHeight: 667, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false
    }
  }

3.可能出现的问题
当配置完上述步骤以后出现下图问题

// 一般vue报错提示很智能，上述提示就是babel-plugin-import包的缺失
直接 yarn add babel-plugin-import
然后 yarn serve 就可以成功运行项目

运行项目之后就可以看到页面中的px单位已经变成vw

相关文章：
移动端适配方案之postcss-px-to-viewport
npm postcss-px-to-viewport

三、配置全局公共样式。

1.我们现在src/styles目录下新建以下scss文件

    ├─styles   // 放置一些通用的scss
    │      _mixins.scss // 放置一些常用的混合器
    │      _variable.scss  // 放置一些样式变量
    │     common.scss  // 放置一些公共的样式

2.在项目根目录新建vue.config.js文件

'use strict'

const name = defaultSettings.title || 'H5' // page title
const port = process.env.port || process.env.npm_config_port || 8888
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
....
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "~@/styles/_variable.scss"; @import "~@/styles/_mixins.scss";`
      }
    }
  },
....
}

下面会讲vue.config.js完整配置