手把手教你構建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完整配置