Vite 2、Vue 3 和 Vant 3 H5 配置指南

前言

在开始之前，确保您已经安装了 Node.js 和 npm。接下来，创建一个新的项目目录，并切换到该目录：

mkdir my-project
cd my-project

初始化项目

首先，使用 Vite 脚手架来初始化一个新的 Vue 3 项目：

npm init vite@latest

选择要使用的模板。对于 H5 项目，请选择 vue-ts 模板。

接下来，安装必要的依赖项：

npm install

配置 Vite

现在，您需要配置 Vite 来支持 H5 项目。打开 vite.config.ts 文件，并在其中添加以下内容：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue()
  ],
  server: {
    host: true
  },
  build: {
    outDir: 'dist',
    rollupOptions: {
      output: {
        entryFileNames: '[name].js',
        chunkFileNames: '[name].js',
        assetFileNames: '[name].[ext]'
      }
    }
  }
})

配置 Vue 3

接下来，您需要配置 Vue 3。打开 src/main.ts 文件，并在其中添加以下内容：

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

配置 Vant 3

接下来，您需要配置 Vant 3。在项目目录中，安装 Vant 3：

npm install vant@next

然后，在 src/main.ts 文件中，导入 Vant 3 并将其注册为全局组件：

// src/main.ts
import Vue from 'vue'
import { Icon, Button } from 'vant'

Vue.use(Icon)
Vue.use(Button)

构建项目

现在，您可以构建项目了。在项目目录中，运行以下命令：

npm run build

构建完成后，您可以在 dist 目录中找到构建好的项目文件。

部署项目

最后，您可以将项目部署到您的服务器上。具体部署方式取决于您的服务器配置。您可以使用 FTP、Git 或其他工具来部署项目。

结语

至此，您已经完成了 Vite 2、Vue 3 和 Vant 3 在 H5 项目中的配置。您可以使用这些配置来快速搭建您的 H5 项目。