vue框架适配移动端

1. 创建vue-cli
   vue init webpack (项目名）

2. 安装六个组件

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

• postcss-aspect-ratio-mini
• postcss-px-to-viewport
• postcss-write-svg
• postcss-cssnext
• cssnano
• postcss-viewport-units

注意：本文全篇都是以vue-cli2为基础的，vue-cli3中以上介绍的9个组件都是没有提前安装的，所以命令如下：

npm i autoprefixer postcss-url postcss-import postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

安装完成后会发现多出六个组件：

"dependencies": {
    "cssnano": "^4.1.0",
    "postcss-aspect-ratio-mini": "0.0.2",
    "postcss-cssnext": "^3.1.0",
    "postcss-px-to-viewport": "0.0.3",
    "postcss-viewport-units": "^0.1.4",
    "postcss-write-svg": "^3.0.1",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  }

3.按照如下内容配置.postcssrc.js（在vue-cli3中，文件名称为postcss.config.js）

module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        "postcss-cssnext": {},
        "postcss-px-to-viewport": {
            viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
            viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
            unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
            selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
            minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
            mediaQuery: false // 允许在媒体查询中转换`px`
        },
        "postcss-viewport-units": {},
        "cssnano": {
            "cssnano-preset-advanced": {
                zindex: false,
                autoprefixer: false
            }
        }
    }
}

4.npm run dev运行项目后会报错，如下（在几次vue-cli3的项目中，走到这一步都没有报这个错，所以根据实际情况来确定是否安装下面的组件）

error  in ./src/App.vue

Module build failed: Error: Cannot load preset "advanced". Please check your configuration for errors and try again.
    at resolvePreset (F:\Net\ceshi\node_modules\cssnano\dist\index.js:83:11)
    at resolveConfig (F:\Net\ceshi\node_modules\cssnano\dist\index.js:94:16)
    at F:\Net\ceshi\node_modules\cssnano\dist\index.js:119:16
    at LazyResult.run (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:277:20)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:192:32)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-296 13:3-17:5 14:22-304
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/components/HelloWorld.vue

Module build failed: Error: Cannot load preset "advanced". Please check your configuration for errors and try again.
    at resolvePreset (F:\Net\ceshi\node_modules\cssnano\dist\index.js:83:11)
    at resolveConfig (F:\Net\ceshi\node_modules\cssnano\dist\index.js:94:16)
    at F:\Net\ceshi\node_modules\cssnano\dist\index.js:119:16
    at LazyResult.run (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:277:20)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:192:32)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)
    at LazyResult.asyncTick (F:\Net\ceshi\node_modules\postcss\lib\lazy-result.js:204:22)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue 4:14-311 13:3-17:5 14:22-319
 @ ./src/components/HelloWorld.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

要解决这个报错，需要安装这个插件

npm i cssnano-preset-advanced --save-dev

安装好在运行以下npm run dev

5.解决老版本手机兼容问题，可以装viewport-units-buggyfill这个组件，安装完成后在main.js中引用这个组件

npm i viewport-units-buggyfill -S

var hacks = require('viewport-units-buggyfill/viewport-units-buggyfill.hacks');
require('viewport-units-buggyfill').init({
    hacks: hacks
});

此外，在一些老手机中还发现关于es6兼容问题，vue-cli中原本所引用的bable并不能完美解决这个问题，还需要安装这两个组件。

babel-polyfill
es6-promise

npm i babel-polyfill es6-promise -S

安装好在main.js引用

import "babel-polyfill"
import 'es6-promise/auto'

最后就可以使用了。。。。。。。