基于vue-cli和vant来搭建开发环境
1.安装vue-cli
2.通过vue-cli构建项目
3.安装vant
4.vant按需引入
5.设置pxtorem(输入px，自动变为rem，这样写的时候可以完全按照设计图来写)

步骤省略 …
用vue-cli指令来构建项目(需要先全局安装vue-cli)
    vue create tea-item
1
选择需要的工具，例如vuex，vue-router等

安装vant
npm i vant -S
1
-S 和 -D的区别：

-S是生产环境中用到的，程序运行的时候也会使用，如element，jQuery等
-D是开发环境用到的，程序运行时不需要，如webpack，gulp等打包和压缩工具

vant按需引入
npm i babel-plugin-import -D
1
并且将babel.config. js改为

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 新增的部分
  plugins: [
    ['import', {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
    }, 'vant']
  ]
}
 
接着在main.js中引用需要导入的组件就可以了

import {Button,Icon} from 'vant'
Vue.use(Button).use(Icon)
 
这时候要重新启动一下项目，才会生效
在Home.vue中加入<van-button type="danger">测试</van-button>
如果出现了红色的按钮，说明已经 成功引入了vant

顺便一提，vue中引用公用css或字体有3种方法

在public/index.html中引用，和普通的html引用css一样
在main.js中import ‘@/assets/css/main.css’（建议在这里引用）
在app.vue中引用
5.移动端的适配，使用pxtorem

npm i postcss-pxtorem -D
1
然后在根目录建立vue.config.js文件,加入下面的代码

module.exports = {
    lintOnSave: true,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 20, // 换算的基数
                        // 忽略转换正则匹配项。插件会转化所有的样式的px。比如引入了三方UI，也会被转化。目前我使用 selectorBlackList字段，来过滤
                        //如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。
                        selectorBlackList: ['vant'],
                        propList: ['*'],
                    }),
                ]
            }
        }
    },
}

 
在public/index.html中加入代码

<script type="text/javascript">
// 设置 rem 函数
function setRem () {

    // 设计稿为375 默认字体大小为20px;所以1rem=20; 375px = 18.75rem
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
        //得到html的Dom元素
    let htmlDom = document.getElementsByTagName('html')[0];
    htmlDom.style.fontSize= htmlWidth/18.75 + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}
</script>
 
这时候写px就会自动转化成rem了