uni-app（Vue3/Vite） + vant UI（Vue3版本）+ js 按需引入的项目搭建-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app（Vue3/Vite） + vant UI（Vue3版本）+ js 按需引入的项目搭建。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

因为要完成软件工程的项目，要做一个nativeApp，看了很多的技术文档以后决定使用多端兼容的uni-app来开发。组件方面的话最后决定使用目前比较火的Vant UI。但是看了CSDN和掘金上面的很多文章，似乎没有一篇是关于uni-app中使用Vite对vant组件进行按需引入（可能这个搭配技术还比较新吧,好像是去年12月份完善的技术），如果按照网上的vue-cli + vant的方法配置DCloud官网中提供的uni-app的项目似乎并不可行（满屏的bug）uni-app官网 uni-app（Vue3/Vite） + vant UI（Vue3版本）+ js 按需引入的项目搭建，鉴于对Vant的热爱，经过本人不懈努力了2周后，终于成功的适配了！

下面就和各位分享一下如何uni-app + (Vite/Vue3) + vant UI按需引入使用到项目当中吧！

一、下载uni-app Vue3/Vite 模板

这一步很简单，就不展开来说了，只需要在使用cmd cd到你的文件夹（前提是装好node.js），这里我使用的是JS版本，当然，如果你们网络不好，也可以直接去官网中gitee下载。

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

由于使用HbuilderX写uniapp比较方便，所以下面的演示将使用HBX向各位演示。

uni-app（Vue3/Vite） + vant UI（Vue3版本）+ js 按需引入的项目搭建

将文件夹拖进来，注意，一定要前面的文件夹表示变成“U”，才行。这里你们直接下载的话是没有node_modules文件夹的，所以才引出我们的下一步。

二、搭建项目环境与下载Vant

第一步，我们需要安装开发环境需要的依赖包，输入命令

npm install

安装完成以后，不出意外的话会弹出一堆的Warning，这个是环境版本的警告而已，不用怕。按照提示输入命令行

npm audit fix --force

检测项目依赖中的漏洞并自动安装需要更新的有漏洞的依赖，而不必再自己进行跟踪和修复。

然后，我们按照Vant官网上下载Vant，我们这里下载Vue 3

# Vue 3 项目，安装最新版 Vant
npm i vant

# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

接着，在 vite 项目中按需引入组件，我们需要安装一个插件， vite-plugin-style-import 。输入命令行（这里推荐按照官方的要求下载1.4.1版本，因为下载最新的2.0.0在写法上会和之前的有所不同，还可能导致兼容性的问题）

# 通过 npm 安装
npm i vite-plugin-style-import@1.4.1 -D

# 通过 yarn 安装
yarn add vite-plugin-style-import@1.4.1 -D

# 通过 pnpm 安装
pnpm add vite-plugin-style-import@1.4.1 -D

安装好后，我们这里需要做一个修改。找到node_modules里面，vuex文件夹，找到里面的package.json，

uni-app（Vue3/Vite） + vant UI（Vue3版本）+ js 按需引入的项目搭建

大约第十二行这里改成（改完后记得保存），这个是因为版本迭代，不改的话就会报写法规范的错误。

    "./": "./*"

uni-app（Vue3/Vite） + vant UI（Vue3版本）+ js 按需引入的项目搭建

然后就是重点了！

这里我们结合使用的uni-app + vite而不是一般的vue_cli + vite项目，所以，这里我们需要在vite.config.js不能仅仅按照Vant上面的直接粘贴（会导致组件没办法使用，不兼容而报错）。所以要按照下面这样写（使用官方给出的UI引入插件）。

import { defineConfig } from "vite";
import uni from '@dcloudio/vite-plugin-uni'
import styleImport, { VantResolve } from "vite-plugin-style-import";
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    uni(),
    styleImport({
      resolves: [VantResolve()],
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
});

然后，咱们的配置就完成了！

PS：如果要使用最新版的vite-plugin-style-import（2.0.0+）就按照一下步骤配置

npm i vite-plugin-style-import

因为插件的使用了 consola 包，所以这里我们也要给它装上

npm i consola -D

相应的，对应的uni-app中vite.config.js也要做出一定的修改（在2.0版本使用的就是createStyleImportPlugin而不是原来的styleImport）

import {
	defineConfig
} from "vite";
import {
	createStyleImportPlugin,
	VantResolve
} from 'vite-plugin-style-import';
import uni from '@dcloudio/vite-plugin-uni'
import path from "path"

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		uni(),
		createStyleImportPlugin({
			resolves: [VantResolve()],
		}),
	],
	resolve: {
		alias: {
			'@': path.resolve(__dirname, 'src')
		}
	}
});

三、在页面中使用Vant组件

这里就可以按照Vant文档中的几种方法进行配置，我这里就不作展开了。这里我使用的是<script setup>的方法。<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。在 <script setup> 中可以直接使用 Vant 组件，不需要进行组件注册（因为比较简单，所以我用了这个，但是不好的地方是在于他只能使用给定的组件名）。

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
	<Button type="primary">主要按钮</Button>
	<Button type="success">成功按钮</Button>
	<Button type="default">默认按钮</Button>
	<Button type="warning">警告按钮</Button>
	<Button type="danger">危险按钮</Button>
  </view>
</template>

<script setup>
  import { Button } from 'vant';
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>