记录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, }; }, };