記錄vue3+vant創建新項目

1.用vscode 新建一個vue項目      vue create jzui

 

2 參考vant 官網  Vant - 輕量、可靠的移動端組件庫 (gitee.io)

通過 npm 安裝

在現有項目中使用 Vant 時，可以通過 npm 或 yarn 進行安裝：

# Vue 2 項目，安裝 Vant 2： npm i vant -S # Vue 3 項目，安裝 Vant 3： npm i vant@next -S


3 通過 babel 插件按需引入組件

# 安裝插件 npm i babel-plugin-import -D 

在.babelrc 或 babel.config.js 中添加配置：

{ plugins: [ [ "import", { "libraryName": "vant", "libraryDirectory": "es", "style": true } ] ] }


4 如果用到哪個組件如：
在man.js中加入

import { Button , Form, Field, CellGroup } from 'vant';

import 'vant/lib/index.css';

createApp(App).use(store).use(router)

.use(Button)

.use(Form)

.use(Field)

.use(CellGroup)

.mount('#app')

 

 

5.比如想做一個登錄表單

基礎用法

在表單中，每個 Field 組件 代表一個表單項，使用 Field 的 rules 屬性定義校驗規則。

<van-form @submit="onSubmit"> <van-cell-group inset> <van-field v-model="state.username" name="用戶名" label="用戶名" placeholder="用戶名" :rules="[{ required: true, message: '請填寫用戶名' }]" /> <van-field v-model="state.password" type="password" name="密碼" label="密碼" placeholder="密碼" :rules="[{ required: true, message: '請填寫密碼' }]" /> </van-cell-group> <div style="margin: 16px;"> <van-button round block type="primary" native-type="submit"> 提交 </van-button> </div> </van-form> 

import { reactive } from 'vue'; export default { setup() { const state = reactive({ username: '', password: '', }); const onSubmit = (values) => { console.log('submit', values); }; return { state, onSubmit, }; }, };