一，创立一个vue我的项目

旧版本创立vue我的项目的命令为：

npm install -g @vue/cli-initvue init webpack my-project

vue init 的运行成果将会跟 vue-cli@2.x 雷同

vue create hello-world
随后会在命令行窗口让抉择是应用蕴含了默认less+babel的preset，还是手动自定义选取须要的个性。除此之外，还能够应用vue ui命令以图形化的界面创立和治理我的项目。

二， 挪动端款式自适应

鉴于挪动端屏幕品种繁多，UI出图个别都是针对750像素出图，并简略给出适配规定，前端开发人员就须要提供一套可用的适配计划，争取可能在起码的工作量下实现更加欠缺的适配。

罕用的适配计划有rem和viewport两种，px2rem postcss-px-to-viewport 等插件能够提供px转rem和viewport的解决。

rem计划能够通过视口的大小动静设置根元素字体大小，所有元素都依据绝对根元素大小编写款式。viewport计划实际上是更改视口的大小，依据视口和UI图宽度的比值进行等比缩放。这种形式毁坏了完满视口，咱们通常采纳rem形式布局。

rem布局计划中，咱们须要查问屏幕宽度而后设置根元素的font-size。个别的自适应计划中，字体依据屏幕大小而变动，这样在屏幕变宽时，字体会变大。事实上在有些时候并不适宜咱们的应用场景。索性淘宝提供了flexible计划，这种计划让字体大小适中放弃在12px，但图片宽高依据html的字体变动来设定。

<script>      !function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c;if(window.navigator.userAgent.indexOf('Android')>-1&&window.navigator.userAgent.indexOf('Le')>-1){f.style.fontSize='30px';}}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将依据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=a.navigator.userAgent,q=(!!p.match(/android/gi),!!p.match(/iphone/gi)),r=q&&!!p.match(/OS 9_3/),s=a.devicePixelRatio;i=q&&!r?s>=3&&(!i||i>=3)?3:s>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var t=e.createElement("div");t.appendChild(g),e.write(t.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));</script>

这里咱们设置了rem的基准单位，然而在款式编写中每一个像素都进行计算的话是十分繁琐的，应用px2rem插件能够帮忙咱们主动转换为rem，咱们只须要依据UI图写px像素即可。

须要在vue.config.js文件中进行配置， postcss-px2rem-exclude 比 px2rem更好用的点在于能够设置不进行转换的黑名单，第三方UI库款式不会被净化。

const px2rem = require('postcss-px2rem-exclude')const px2remConfig = px2rem({  remUnit: 75,  exclude: /node_modules|floder_name/i  // selectorBlackList: ['weui','mu']})module.exports = {  css: {    loaderOptions: {      postcss: {        plugins: [          px2remConfig        ]      }    }  }}

三，图片增加和1像素边框

dpr2和dpr3屏幕的呈现，屏幕分辨率更多，图画更加清晰。然而咱们在编写款式时，仍然是依据css像素编写的，而非设施物理像素。为了能使设施性能最大化体现，在图片的解决中，个别会针对2倍屏及以下加载2倍图，对3倍屏加载3倍图。采纳less mixin来实现媒体查问并加载对应的背景图片。

mixin.less

.bg-image(@url) {  background-image: e(%("url(../assets/%a@2x.png)", e(@url)));  @media (-webkit-min-device-pixel-ratio: 3),  (min-device-pixel-ratio: 3) {    background-image: e(%("url(../assets/%a@3x.png)", e(@url)));  }}

在须要按分辨率增加背景图片的中央：

@import "../assets/style/mixin.less";.close {  width: 42px;  height: 42px;  .bg-image('close');  background-position: center;  background-repeat: no-repeat;  background-size: 100% 100%;}

这个只是背景图片的解决，对于img标签的图片也有简略办法解决，srcset标签可依据屏幕宽度或者像素比来加载对应的图片，如果不是对应的值，就加载默认图片。

<img srcset="foo-375w.jpg,             foo-750w.jpg 2x,             foo-751w.jpg 3x"     src="foo-750w.jpg">

对于1像素边框，在很多UI图中，1像素是指的一个物理像素，而非css像素，如果咱们用css像素去开发，在多倍屏上就会显得较粗，遇到较真的UI和产品就会指出来要求肯定要修复。所以咱们须要采纳一些伎俩来实现1个物理像素的边框，缩放就是很好的伎俩。
mixin.less

.border-1px(@color: #ccc, @radius: 2PX, @style: solid){  position: relative;  &::after {    content: "";    pointer-events: none;    display: block;    position: absolute;    left: 0;    top: 0;    transform-origin: 0 0;    border: 1PX @style @color;    border-radius: @radius;    box-sizing: border-box;    width: 100%;    height: 100%;    @media (min-resolution: 2dppx){      width: 200%;      height: 200%;      border-radius: @radius * 2;      transform: scale(.5);    }    @media (min-resolution: 3dppx){      width: 300%;      height: 300%;      border-radius: @radius * 3;      transform: scale(.333);    }  }}

四，增加环境变量

在理论开发中，咱们可能会波及开发环境、预生产环境、生产环境等等，每个环境中会波及不同的配置，如后盾接口地址、公布路由等，为了防止在开发和打包过程中频繁正文和更改这些配置，咱们能够把他们写入环境变量配置文件里。在我的项目根目录下创立.env.xxx文件，xxx为以后的环境模式，如development production，对于预公布环境等，咱们在打包时定义模式
package.json

 "scripts": {    "serve": "vue-cli-service serve",    "build:test": "vue-cli-service build --mode test",    "build:prod": "vue-cli-service build",    "lint": "vue-cli-service lint"  },

采纳 npm run build:test命令打包的我的项目会主动读取.env.test文件中配置
.env.test

NODE_ENV = 'production'# 键名须以VUE_APP结尾VUE_APP_ENV = 'test'VUE_APP_MODE = 'test'VUE_APP_SSO='http://localhost:9080'

在须要应用到环境变量的中央，通过process.env.envName即可读取到配置。

五，webpack额定配置

应用vue-cli创立的我的项目，其实曾经有了相应的简略配置。然而咱们仍然能够额定配置vue.config.js，达到webpack性能的最大化
具体的能够参考 https://mp.weixin.qq.com/s/ffUcsTnVNtTb-VinH8Llvg