Share a Vue project practice plan

One, create a vue project

The command to create a vue project in the old version is:

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

vue init operating results will follow vue-cli@2.x same

vue create hello-world
Then, in the command line window, you can choose whether to use less+babel , or manually customize and select the required features. In addition, you can also use the vue ui command to create and manage projects with a graphical interface.

Second, the mobile terminal style adaptive

In view of the wide variety of mobile screens, UI output is generally aimed at 750 pixels, and the adaptation rules are simply given. Front-end developers need to provide a set of available adaptation solutions to achieve it with the least amount of work. More perfect adaptation.

Commonly used adaptation schemes include rem and viewport. px2rem postcss-px-to-viewport can provide px to rem and viewport processing.

The rem scheme can dynamically set the font size of the root element through the size of the viewport, and all elements are styled according to the relative root element size. The viewport scheme is actually to change the size of the viewport, and scale it according to the ratio of the width of the viewport and the UI image. This method destroys the perfect viewport, and we usually use rem layout.

In the rem layout scheme, we need to query the screen width and then set the font-size of the root element. In a general adaptive scheme, the font changes according to the screen size, so that when the screen becomes wider, the font becomes larger. In fact, in some cases it is not suitable for our usage scenarios. Simply Taobao provides a flexible solution, which keeps the font size moderately at 12px, but the image width and height are set according to the html font change.

<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>

Here we set the base unit of rem, but it is very cumbersome to calculate each pixel in the style writing. Using the px2rem plug-in can help us automatically convert to rem. We only need to write px pixels according to the UI map.

Need to be configured in the vue.config.js file, postcss-px2rem-exclude is better than px2rem in that you can set a blacklist without conversion, and the third-party UI library style will not be polluted.

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
        ]
      }
    }
  }
}

Three, image addition and 1 pixel border

With the emergence of dpr2 and dpr3 screens, the screen resolution is more and the picture is clearer. But when we write styles, we still write them based on css pixels, not device physical pixels. In order to maximize the performance of the device, in the image processing, 2x images are generally loaded for 2x screens and below, and 3x images are loaded for 3x screens. Use less mixin to implement media query and load the corresponding background image.

mixin.less

.bg-image(@url) {
  background-image: e(%("url(../assets/[e-mail])", e(@url)));
  @media (-webkit-min-device-pixel-ratio: 3),
  (min-device-pixel-ratio: 3) {
    background-image: e(%("url(../assets/[e-mail])", e(@url)));
  }
}

Where you need to add a background image by resolution:

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

This is only the processing of the background image. There is also a simple method for the image of the img tag. The srcset tag can load the corresponding image according to the screen width or pixel ratio. If it is not the corresponding value, it will load the default image.

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

Regarding the 1-pixel border, in many UI diagrams, 1 pixel refers to a physical pixel, not a css pixel. If we use css pixels to develop, it will appear thicker on multiple screens, and if you encounter more real UI and The product will point out and require that it must be repaired. So we need to use some means to achieve a frame of 1 physical pixel, zoom is a good means.
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);
    }
  }
}

Fourth, add environment variables

In actual development, we may involve development environment, pre-production environment, production environment, etc., each environment will involve different configurations, such as background interface address, release route, etc., in order to avoid frequent comments during development and packaging And to change these configurations, we can write them into the environment variable configuration file. .env.xxx file in the project root directory. xxx is the current environment mode, such as development production . For the pre-release environment, we define the mode when packaging
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"
  },

The project packaged with the npm run build:test command will automatically read the configuration in the .env.test
.env.test

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

Where environment variables need to be used, the configuration can be read process.env.envName

Five, additional configuration of webpack

Projects created with vue-cli actually already have a corresponding simple configuration. But we can still configure additional vue.config.js to maximize webpack performance
For details, please refer to https://mp.weixin.qq.com/s/ffUcsTnVNtTb-VinH8Llvg