vue-vant的使用

@vant的使用

前提是安装好了node
1. 安装vue的脚手架vue-cli
npm install --g vue-cli
2. 判断vue-cli是否安装好
vue -V
3. 安装好后 创建vue项目 这里用的是vue-cli3  
vue create project_name
4. 上述均选择默认的
5.  安装vant 
npm i vant -S
6. 安装好后需要配置的有
babel.config.js :
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      { libraryName: 'vant', libraryDirectory: 'es', style: true },
      'vant',
    ],
  ],
};
7. 为了使各个不同大小的页面能够得到适配，需要用到两个插件
rem布局适配
postcss-pxtorem
lib-flexible 
8. 使上述两个插件能够得到配合
在main.js内引入
import 'amfe-flexible/index.js'
在vue.config.js 里配置
const autoprefixer=require('autoprefixer')
const pxtorem = require('postcss-pxtorem');
module.exports = {
  outputDir: 'dist',
  publicPath: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/',
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtorem({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      }
    }
  },
  
};
或者新增一个postcss.config.js

module.exports = {
    plugins: {
      'autoprefixer': {
        overrideBrowserslist: [
          'Android 4.1',
          'iOS 7.1',
          'Chrome > 31',
          'ff > 31',
          'ie >= 8'
        ]
      },
      'postcss-pxtorem': {
        rootValue: 37.5,
        propList: ['*']
      }
    }
  
}
9. 重启即可