vant是開源的移動端元件庫，配合h5+的方式來寫webapp。vue3.0版本已經有了哦。
引入vant

Vue 2 專案，安裝 Vant 2.x 版本：

npm i vant -S

Vue 3 專案，安裝 Vant 3.x 版本：

npm i [email protected] -S

引入的方式是按需引入

安裝外掛

npm i babel-plugin-import -D

主要看你的vuecli建立的是哪個檔案有.babelrc就在這個引入，有babel.config.js就在babel.config.js中引入

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

然後在components中新建一個資料夾叫vant 裡面新增一個vant.js,按需匯入元件。再把vant.js在mian.js中引入。

import Vue from 'vue'
import { Form,Button,Cell,CellGroup,Field} from 'vant';
Vue.use(Field);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Button);
Vue.use(Form)
 
;

這裡面有坑，他的一個大元件可能是配合多個小元件組成的，之前報錯，我還以為引入的方式出問題了。