vue/cli +vant

一 首先安装vue Cli

cnpm install -g @vue/cli

二 创建一个vue项目

vue create my-app

这个时候就已经创建好了一个基础的vue，创建完成后依次安装我们需要的依赖

三 安装vant

cnpm i vant -S

四 引入组件

1、可以全局导入所有组件，只需要在main.js里面引入即可：

      import Vant from 'vant';

     import 'vant/lib/index.css'

2、按需引入（官方推荐）：babel-plugin-import

    cnpm i babel-plugin-import -D

在 babel.config.js 设置

module.exports = {  presets: [    '@vue/cli-plugin-babel/preset'  ],  plugins: [    ['import', {      libraryName: 'vant',      libraryDirectory: 'es',      style: name => `${name}/style/less`    }, 'vant']  ]}

五 less配置

   在vue.config.js里面为项目做基础配置

css: {

    loaderOptions: {

      less: {

        // 若使用 less-loader@5，请移除 lessOptions 这一级，直接配置选项。

        lessOptions: {

          modifyVars: {

            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）

            hack: `true; @import "./src/assets/css/reset.less";`,

          },

        },

      },

    },

  },

同时，vue-cli3.0的vue.config.js也是我们打包的配置文件，如果有需要可以在此文件设置打包后的输出文件以及静态文件打包路径

六 rem适配

vue和vant就安装成功了，因为是webapp项目，需要做屏幕适配，vant采用的是px，官方推荐两个工具

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

lib-flexible 用于设置 rem 基准值

安装完成之后，配置postcss ，一般我们的设计稿是750，需要兼容vant，新建一个postcss.config.js，

module.exports = {  plugins: {    'postcss-pxtorem': {      rootValue: 37.5,      propList: ['*']    },  }}