Vue Cli3 + Vant 实现移动端 viewport 适配

1、安装 Vue Cli

npm install -g @vue/cli

2、创建项目

vue create hello-world

3、安装 Vant

cd hello-world

npm i vant -S

4、自动按需引入组件

npm i babel-plugin-import -D

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

5、界面内使用组件

<script>
import { Button } from "vant";
export default {
    components: {
        [Button.name]: Button//特别注意这里要这么写，不然会报错
    }
};
</script>

<template>
    <div>
       <van-button type="default">默认按钮</van-button>
    </div>
</template>

6、vw布局适配移动端

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//不设置默认320
                    })
                ]
            }
        }
    }
};

7、index.html

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

8、启动项目

npm run serve