vant 和vue脚手架3 创建

第一步 安装vunt
1.npm i vant -S
第二步 npm i babel-plugin-import -D 它会在编译过程中将 import 的写法自动转换为按需引入的方式

//创建一个 babel.config.js
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

第三步 还可以导入所有的组件在main.js里面导入如下

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
 
Vue.use(Vant)

第四步 安装 postcss-pxtorem，amfe-flexible 插件

1、安装这两个是由于vant 的单位都是以px为准的，所以在移动端进行适配的话会出问题的，因此需要安装这两个插件
2、在项目目录下输入命令：npm install postcss-pxtorem -save 安装完成之后输入 npm install amfe-flexible -save命令
3、两个都安装好了之后在vue.config.js文件里面添加如下内容


const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports ={
  css: {
    // modules:false,
    // extract:true,
    sourceMap: false,
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtorem({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      }
    }
  }
}

第五步 在min.js导入

import 'amfe-flexible';