vw移动端布局，vue项目初始化构建

大漠老师的vue项目vw布局
现在已经收费

1.构建项目

vue init webpack demo

之前的准备工作，像下载node啥的就不多逼逼了

2. 引入“vw”布局所需要的包

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano cssnano-preset-advanced   -D

试问：为啥要加-D呢，请看官请看：

npm 命令解析

3. 配置“vw”

1. .postcssrc.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, // 视窗的宽度，设计稿的宽度一般是750 
   		  viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置 
   		  unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除） 
   		  viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw 
   		  selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 
   		  minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值 
   		  mediaQuery: false // 允许在媒体查询中转换`px`
   	     },
   	    "postcss-viewport-units":{}, 
   	    "cssnano": { 
   	      preset: "advanced", 
   	      autoprefixer: false,
   	      "postcss-zindex": false
   	      }
   	    // to edit target browsers: use "browserslist" field in package.json
   	  }
   	}
   

2. index.html配置

   	// 实现Retina屏1px像素边框
   	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
   	// 降级处理
   	<script src="http://g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
   	<script>
   	  window.onload = function() {
   	    window.viewportUnitsBuggyfill.init({
   	      hacks: window.viewportUnitsBuggyfillHacks
   	    })
   	  }
       </script>
   

4.兼容配置

在全局样式文件中添加如下：(跟你说这个很重要，很重要，很重要)

img {
  content: normal !important;
}

5.vw配置完成

重启项目，完成vw配置，然后按着设计图写就好了，是多少写多少比如是200px，就写200px就好了，会自动转化成vw的，在chrome控制台中可以看到已经转化后的vw

6.ele-ui按需引入

逼逼叨一下：

1. 移动端项目为了保证项目打包后体积小，需要按需引入，因为我用的是element-ui，所以你们可以参考一下
2. 按照官方给的教程你会崩溃，所以在这里记录一下

1. npm i element-ui
2. 为了main.js美观我把引入组件代码单独写了一个文件src/element-ui/index.js，然后main.js在引入就好了

   import Vue from 'vue'
   import {
     Button
   } from 'element-ui' // 按需引入element-ui
   
   Vue.component(Button.name, Button)
   ## 注意：像有些组件（message）引入方式与普通样式组件引入方式不一样，按照官方即可
   

3. 配置.babelrc（这个让人头大）

   这个按官方的做的话，肯定会出问题，不要下载es2015啥的没用，现在因为wenpack 版本提高，都会集成babel转换文件的，要是没有的话就下载npm i babel-preset-env -D即可，现在仅需要在plugins添加上，如下代码即可：

   [
         "component",
         {
           "libraryName": "element-ui",
           "styleLibraryName": "theme-chalk"
         }
   ]
   

7.配置sass

npm i node-sass sass-loader -D即可，有的教程说需要配置webpack.base.conf.js，这个需要看wenpack版本，如果你配置了，报错了删掉就好了，如果没加上报错加上就好。

{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

然后在文件中使用就好了<style lang="scss" scoped>lang=“scss”

8.更多初始化项目介绍参考

我的另一个blog，结合到一起更加好用。包括一些减小打包体积，初始化css默认样式的等操作