Vue Cli3 + Vant to achieve mobile viewport adaptation

1. Install the Vue Cli

npm install -g @vue/cli

2. Create projects

vue create hello-world

3. Install Vant

cd hello-world

npm i vant -S

4. Automatically import components on demand

npm i babel-plugin-import -D

// Add configuration to.babelrc // Note: WebPack 1 does not need to set libraryDirectory {"plugins": [["import", {
      "libraryName": "vant"."libraryDirectory": "es"."style": true}}]]Copy the code

Module.exports = {plugins: [['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']]};Copy the code

5. Use components in the interface

<script>
import { Button } from "vant";
exportDefault {components: {[button.name]: button.name}}; </script> <template> <div> <van-buttontype="default"</van-button> </div> </template>Copy the code

6. Vw layout ADAPTS to mobile terminal

npm install postcss-px-to-viewport --save-dev

//在项目根目录下创建 vue.config.js
const autoprefixer = require('autoprefixer');
const pxtoviewport = require('postcss-px-to-viewport'); module.exports = { css: { loaderOptions: { postcss: { plugins: [ autoprefixer(), pxtoviewport({ viewportWidth: 375// Do not set default 320})]}}}};Copy the code

7, the index. HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

8. Start the project

npm run serve