vue移动端中使用vw自适应配置

需要借助官网提供的构建工程以及一些PostCSS插件来完成
需要准备以下东西

NodeJs
NPM
Webpack
Vue-cli
postcss-import
postcss-url
postcss-aspect-ratio-mini
postcss-cssnext
autoprefixer
postcss-px-to-viewport
postcss-write-svg
cssnano
postcss-viewport-units
Viewport Units Buggyfill

使用Vue-cli 构建项目
1、 全局安装 vue脚手架

   npm install  -g vue-cli

2、使用vue-cli 来构建项目

    vue init webpack proejctname  

3、进入到刚创建的项目

    cd projectname 

4、cmd ->启动项目

 npm run dev  

安装PostCSS插件
1、项目根目录下 .postcssrc.js

打开发现 默认有

postcss-import ---- 解决@import 引入路径问题
postcss-url—处理文件引用路径的处理
autoprefixer — 处理浏览器前缀的问题 的一个插件

其他PostCSS插件

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

安装以上插件

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

安装完成在 项目根目录下 .package.js中

配置安装的插件
在项目根目录下 .package.js中

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini":{},
    "postcss-write-svg":{
    	utf8:false
    },
    "postcss-cssnext":{},
    "postcss-px-to-viewport":
    {
		viewportWidth: 750, // (Number) The width of the viewport. 
		viewportHeight: 1334, // (Number) The height of the viewport. 
		unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to. 
		viewportUnit: 'vw', // (String) Expected units. 
		selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px. 
		minPixelValue: 1, // (Number) Set the minimum pixel value to replace. 
		mediaQuery: false // (Boolean) Allow px to be converted in media queries.
    },
    "postcss-viewport-units":{},
    "cssnano": { 
    	preset: "advanced", 
    	autoprefixer: false, 
    	"postcss-zindex": false 
    }
   
  }
}

在cssnano 配置中使用 advanced 所以需要另外安装

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

启动项目 npm run dev

到这里 算完成了