项目附件懒人下载：

版本介绍

•  - node：v6.14.18 
•  - npm:     v20.16.0
•  - vue3+vite+vant
•  - vant4参考地址：https://vant-ui.github.io/vant/#/zh-CN
•  - vite借鉴地址：https://cn.vitejs.dev/guide/

项目搭建

1、新建工程文件夹（laikebao名称随意）

2、打开CMD命令窗口，依次执行下列 "npm" 命令 , 注意只执行 前缀 是npm 的命令

执行命令1：npm create vite@latest
npx: installed 1 in 1.013s
√ Project name: ... consumer //输入你要新建的项目名称
√ Select a framework: » Vue //选择开发语言 vue
√ Select a variant: » TypeScript //选择ts, 不会的可以选择JS, 
执行命令2：npm install

3、使用自己常用的编译工具，打开我们的项目，可以在 编译工具中在此执行 一遍 “npm install”  项目位置有迁移或变动，就把 node_modelules 这个文件夹删除，然后执行 npm install 命令就好 

4、执行启动命令 npm run dev , 执行成功之后

5、在浏览器中 访问 http://localhost:5173/ 

npm run dev

> consumer@0.0.0 dev D:\Project\laikebao\consumer
> vite


  VITE v5.3.5  ready in 263 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

6、vite+vue3项目就搭建起来了，现在安装  vant4， 如果你只是用作后台管理系统或者web端应用就可以直接使用了，无需在安装 vant4-UI,这个 UI 是做手机端应用开发使用的，web端可以集成 iview、element、ant design vue等优秀的UI框架

执行命令：npm i vant

+ vant@4.9.3
added 3 packages from 1 contributor in 4.455s

5 packages are looking for funding
  run `npm fund` for details

7、我们验证一下vant4 是否安装成功

• 重新main.ts文件夹，导入vant 的组件
• 清除掉所有的css信息，防止干扰我们对组件的使用 style.css清空
• main.ts

• import { createApp } from 'vue'
  import './style.css'
  import App from './App.vue'
  import 'vant/lib/index.css';
  import { Button } from 'vant'
  let app = createApp(App)
  app.use(Button)
  app.mount('#app')

• App.vue

• <script setup lang="ts">
  </script>
  
  <template>
    <div>
      <van-button type="primary">主要按钮</van-button>
      <van-button type="success">成功按钮</van-button>
      <van-button type="default">默认按钮</van-button>
      <van-button type="danger">危险按钮</van-button>
      <van-button type="warning">警告按钮</van-button>
    </div>
  </template>
  
  <style scoped>
  </style>
  

• style.css文件夹全部清空

• 然后重新运行项目，有热部署的编译器，可以值浏览器刷新我们打开的 http://localhost:5173/页面即可，对照着 vant4 官方文档，如果UI显示正常，就是安装成功

• 

TIP:学习交流群可微信进群