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

可能原因：

nodejs与sass版本不匹配(可能性最大：解决办法见下方)

node无法下载sass依赖：解决办法：安装淘宝镜像，执行命令：npm config set registry http://registry.npm.taobao.org/

其他原因：解决办法：卸载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 vantVue 2 项目，安装 Vant 2
npm i vant@latest-v2

按需引入组件样式：

安装插件

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

配置插件
如果是基于 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()],}),],
});

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

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

四、运行结果

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

Uni-APP+Vite+Vue3+TS+Vant 搭建项目相关推荐

vite+vue3+ts框架搭建问题记录
404 按官网提示执行npm init vite@latest报错 node版本太低,更新node版本即可,window不能使用命令行更新,重新下载node安装包. 下载地址用下载 | Node.js ...
vite+vue3+ts项目搭建之集成qiankun让其成为子应用模板(vite+vue3+ts+qiankun项目)—新增主应用在线地址可以进入vue2/vue3子应用
前言以下操作,是续接之前第四步 --即:vite+vue3+ts+pinia+element-plus项目已完成搭建好,可以直接业务开发了主应用技术栈:vue2+webpack+js 集成qia ...
vite+vue3+ts+element-plus项目搭建--超详细
vite+vue3+ts+element-plus项目搭建–超详细 vite 作用快速的冷启动:不需要等待打包操作: 即时的热模块更新:替换性能和模块数量的解耦让更新飞起: 真正的按需编译:不再等待 ...
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）
回顾上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客上篇文章搭建了vue3项目,引入了ant ...
vue3+vite3+vant搭建移动端简易模版
前言 vue3.x相关的生态已经在不断的完善中,相应的UI/路由/pinia等都已成熟,新的项目也在考虑使用新版本开发了,开一个帖子记录一下搭建移动端简易模版的过程,方便以后回顾. vite前端构建工 ...
vite + vue3 + ts集成Cesium
vite + vue3 + ts集成Cesium 安装cesium:npm i cesium vite-plugin-cesium vite -D 在vite.config.ts中进行相应的cesiu ...
vue3+ts+vant移动端H5项目搭建
使用vue-cli搭建项目 1.全局安装vue-cli npm install -g @vue/cli 安装完成验证 vue -V 2.使用vue ui 可视化创建项目 2.1 vue ui vue ...
vite+vue3+ts项目插件使用（提高开发效率vite+vue3插件使用）新增在线预览地址
在线预览 Link:https://wocwin.github.io/wocwin-admin/ 一.@vitejs/plugin-vue-jsx vite+vue3项目全面支持jsx语法 npm i ...
【Vue3】创建 vite + vue3 + Ant Design Vue 项目
搭建脚手架创建项目: 然后按照它的指示运行项目配置文件安装构建 vue-router: npm i vue-router@next 创建 router/index.js 文件: import { ...