xia仔ke：quangneng.com/2390/

使用 Vue 3、Vite 和 Vant UI 构建一个项目可以让你充分利用现代前端技术的优势，包括更快的构建速度、更小的包体积以及丰富的 UI 组件库。下面是创建这样一个项目的基本步骤：

1. 安装依赖

首先，你需要确保你的系统上已经安装了 Node.js 和 npm 或 yarn。然后，你可以使用 create-vite 脚手架来初始化一个 Vue 3 项目。打开终端并执行以下命令：

bash

深色版本

npm init vite@latest

或者使用 yarn：

bash

深色版本

yarn create vite

接下来，选择 Vue 作为框架，然后按照提示完成项目创建。这将自动为你设置好 Vite 和 Vue 3 的基础环境。

2. 添加 Vant UI

Vant 是一套轻量、可靠的移动端 Vue 组件库，适用于 Vue 3。在项目根目录下运行以下命令来安装 Vant：

bash

深色版本

npm install vant

或使用 yarn：

bash

深色版本

yarn add vant

3. 引入 Vant

在你的 main.js 或者 main.ts 文件中引入 Vant 并使用它：

javascript

深色版本

import { createApp } from 'vue'

import App from './App.vue'

import * as vant from 'vant'

const app = createApp(App)

// 全局注册 Vant 组件

for (const [key, component] of Object.entries(vant)) {

    app.component(key, component)

}

app.mount('#app')

4. 配置样式

Vant UI 使用 SCSS 编写，所以你需要确保你的项目可以处理 SCSS 文件。Vite 默认支持 CSS 和 PostCSS，但要使用 SCSS，你可能需要添加一个额外的插件，如 vite-plugin-scss。不过，在大多数情况下，Vite 自动支持 SCSS，因此你可能不需要任何额外的配置。

将 Vant 的样式文件引入到你的项目中：

javascript

深色版本

// main.js

import 'vant/lib/index.css';

5. 创建组件

现在你可以开始创建你的 Vue 3 组件，并使用 Vant 的 UI 组件来构建你的应用界面。例如，你可以创建一个包含按钮和弹窗的简单组件：

vue

深色版本

<template>

  <div>

    <van-button type="primary">点击我</van-button>

    <van-popup v-model:show="showPopup">

      <p>这是一个弹窗</p>

    </van-popup>

  </div>

</template>

<script>

import { ref } from 'vue'

export default {

  setup() {

    const showPopup = ref(false)

    return {

      showPopup,

    }

  },

}

</script>

6. 运行项目

最后，运行你的项目：

bash

深色版本

npm run dev

或使用 yarn：

bash

深色版本

yarn dev

这将在本地启动一个开发服务器，你可以在浏览器中访问 http://localhost:3000 来查看你的应用。

以上就是使用 Vue 3、Vite 和 Vant UI 构建项目的完整流程。随着你对项目的深入，你可能还需要配置路由、状态管理等高级功能，比如使用 Vue Router 和 Pinia。