vant组件库的使用

1 安装

个人喜欢用npm或者yarn安装

// Vue 2 项目，安装 Vant 2.x 版本：
npm i vant -S
yarn add vant

// Vue 3 项目，安装 Vant 3.x 版本：
npm i vant@next -S
yarn add vant@next

2 引入

强烈建议按需引入

// js 安装插件
npm i babel-plugin-import -D
// ts 安装插件
npm i ts-import-plugin -S

// 在.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']
  ]
};

//vue项目在vue.config.js中配置
configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(jsx|tsx|js|ts)$/,
          loader: 'ts-loader',
          options: {
            transpileOnly: true,
            getCustomTransformers: () => ({
              before: [tsImportPluginFactory({
                libraryName: 'vant',
                libraryDirectory: 'lib',
                style: true
              })]
            }),
            compilerOptions: {
              module: 'es2015'
            }
          },
          exclude: /node_modules/
        }
      ]
    },
  },