Uni-APP+Vite+Vue3+TS+Vant 搭建项目

一、创建工程

下载官方的cli代码
https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip

解压缩后执行下面命令即可运行

npm i
npm run dev:h5

二、安装Sass依赖

执行下面命令即可

npm i sass node-sass  sass-loader -s -d

然后会报错

npm install 报错 ERR! gyp ERR! cwd D:\workspace\node_modules\node-sass
npm ERR! gyp verb which failed Error: not found: python2

可能原因：

1. nodejs与sass版本不匹配(可能性最大：解决办法见下方)
2. node无法下载sass依赖：解决办法：安装淘宝镜像，执行命令：npm config set registry http://registry.npm.taobao.org/
3. 其他原因：解决办法：卸载node重装(这个可以大概也是重装后版本匹配上了)；安装python等

解决办法：nodejs与node-sass版本不匹配:

查看node版本：node -v

根据node版本与node-sass版本对应关系修改package.json文件node-sass版本，修改sass-loader版本



重新安装npm i 后再次运行即可

三、引入vant

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

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

按需引入组件样式：

1. 安装插件

# 通过 npm 安装
npm i unplugin-vue-components -D

# 通过 yarn 安装
yarn add unplugin-vue-components -D

# 通过 pnpm 安装
pnpm add unplugin-vue-components -D

2. 配置插件
   如果是基于 vite 的项目，在 vite.config.js 文件中配置插件：

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
// 按需加载vant
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
  plugins: [
    uni(),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
});

3. 使用组件
   完成以上两步，就可以直接在模板中使用 Vant 组件了，unplugin-vue-components 会解析模板并自动注册对应的组件。

<template>
  <van-button type="primary">主要按钮</van-button>
</template>

四、运行结果

到这里就成功了，参考文档：
https://blog.csdn.net/weixin_39370093/article/details/125796949