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

已于 2022-10-28 11:57:23 修改
阅读量5.6k 收藏 16
点赞数 1
分类专栏： vue3 uniAPP ts 文章标签： typescript vue
于 2022-09-20 14:20:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42479305/article/details/126951961
版权
本文介绍了如何利用Uni-APP、Vite、Vue3和TypeScript结合Vant搭建项目。首先从下载官方CLI开始，接着解决Sass依赖安装时遇到的问题，如node-sass与node版本不匹配，提供了解决方案。然后介绍了如何按需引入Vant组件，并在vite.config.js中配置。最后，项目成功运行，详细步骤参考链接给出的文档。
摘要由CSDN通过智能技术生成

一、创建工程

下载官方的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

可能原因：

最低0.47元/天 解锁文章
头像加口罩小程序-基于uniapp使用vue快速实现
02-11
头像加口罩小程序-基于uniapp使用vue快速实现 充分利用的流量运营思维包括取名截流、公众号文章引流、广告放置策略优化，累计获得10w+用户。 核心代码开发时间为两个周末。 初步实现小程序矩阵雏形。
vite + vue3 + uniapp 项目从零搭建
qq_33365152的博客
07-18 1740
vite + vue3 + uniapp 项目从零搭建、uniapp、微信小程序
Vscode 构建 uniapp vue3 + ts 微信小程序项目
最新发布
qq_38074398的博客
12-11 1841
为什么要使用 Vscode 来开发构建 uniapp 项目？从个人角度来讲，仅是想要 Vscode 丰富的插件生态，以及最重要的优秀的 TtypeScript 类型检查支持，因为本人是 TS 重度使用者。如果你可以更习惯使用 js 进行开发，使用 HBuilderX 要比 Vscode 更加方便。注：后面的操作，皆以微信小程序为例。
【Vue3】实战双端招聘APP
学无止境
10-01 236
【Vue3】实战双端招聘APP
Vue3+Vite+Vant-UI 开发双端招聘APP(计思维3重提升)
2301_81550948的博客
12-01 224
同时，Vue3.3还提供了更多的API和工具，如Vue CLI 4.x、Vue Devtools等，协助开发者愈加便当地停止开发和管理项目。除了Vue自身的新功用和技术，相关的技术和工具也在不时开展和创新。例如，Vite是一款全新的构建工具，它应用了ES Module的特性，完成了快速的开发启动和模块热更新。总之，最新Vue3.3及相关技术为前端开发者提供了更多的工具和创新，使得应用开发愈加高效、灵敏和可维护。经过不时学习和应用这些新技术和新工具，开发者可以进步应用的质量和性能，为最终用户带来更好的体验。
vite+vue3+ts+vant 移动端
Lycoris_Red的博客
02-15 2024
1.创建vite项目 通过npm初始化 npm init vite@latest 通过Yarn yarn create vite 或者自定义模板 # npm 6.x npm init vite@latest my-vue-app --template vue-ts # npm 7+, 需要额外的双横线： npm init vite@latest my-vue-app -- --template vue-ts # yarn yarn create vite my-vue-app --t
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
vue3-vite-ts-Vant：vue3 + vite + ts + Vant + vuex +路由器
03-04
Vue3-Vite-TS-Vant 是一个现代前端开发框架的集成，主要采用了 Vue.js 的最新版本 3，搭配了 Vite 构建工具，TypeScript 作为编程语言，Vant UI 库，Vuex 状态管理，以及 Vue Router 路由系统。这个组合为开发者提供...
使用vue3+ant-design-vue+vite+ts开发的通用中后台框架，实现了权限系统.zip
01-22
Vue 3.2 -- 使用vue3+ant-design-vue+vite+ts开发的通用中后台框架，实现了权限系统、动态菜单、国际化、mock数据、表格集成快速使用等功能，简洁干净开箱即用。. 各领域数据集，工具源码，适合毕业设计、课程设计...
使用vue3+ant-design-vue+vite+ts开发的通用后台框架.zip
01-04
使用vue3+ant-design-vue+vite+ts开发的通用后台框架，实现了权限系统、动态菜单、表格集成快速使用等功能，简洁干净开箱即用。 Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 ...
Vue3+Ts+Vite的uniapp小程序项目中引入最新vant-weapp v1.11.2并且以后更新版本全部可用
weixin_55331484的博客
12-18 1479
Vue3+Ts+Vite的uniapp小程序项目中引入最新vant-weapp v1.11.2并且以后更新版本全部可用
uniapp vue3版本+ts使用 vant小程序 组件库
qq_43319351的博客
06-23 2326
4.从node_modules文件夹下的@vant文件夹里面的weapp，weapp下的dist文件夹，将dist文件夹里面的文件复制到/wxcomponents/vant。3.在项目src目录创建wxcomponents文件夹，在wxcomponents文件夹下创建vant文件夹。注意引入路径需要改一下，改成正确的路径，如/wxcomponents/vant。1.首先从uniapp官网下载vue3版本+ts的模板。5.单页面引用 在页面配置添加组件。5.全局引用 在。
vite 移动端项目搭建vue3+ts+vant3
yyXieDaiMa的博客
03-22 2520
这样在代码保存的时候， eslint就会自动检查并修复。（使用vite官方模板）,这里使用的是vue-ts版本。属性，设置该属性后，即可在对应的机型上开启适配。也可以添加到package.json中。配置完成后，可在组件中直接使用vant组件。也可以通过命令去运行eslint。： 增加windi.config.ts。安装后会在项目中生成对应的配置文件。tsconfig.json增加配置。vit.config.ts配置。：mian.ts 引入样式文件。Vant 中部分组件提供了。vue3对应的语法高亮插件。
uni-app中如何使用ucharts
weixin_39436129的博客
09-23 2806
uni-app中ucharts的使用
基于Vite + Vue3 + NaiveUI + TypeScript的中后台管理模版 — Soybean Admin开源啦
qq_32596855的博客
01-24 4624
Soybean Admin 是一个基于 Vue3、Vite、TypeScript、Naive UI 的免费中后台模版，它使用了最新的前端技术栈，内置丰富的主题配置，有着极高的代码规范，基于mock实现的动态权限路由，开箱即用的中后台前端解决方案，也可用于学习参考。
uni-app+优博讯
09-06
根据引用和引用，uni-app优博讯可以通过监听扫描来实现功能。可以使用filter.addAction("android.intent.ACTION_DECODE_DATA")或者filter.addAction("android.intent.extra.SCAN_DATA")来监听扫描事件。这样，在app启动之后就可以开始监听，并通过全局事件来推送给需要的页面，而不是在每个页面都自己去监听，有利于代码的维护和提升性能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [在uni-app中对优博讯和新大陆安卓(Android)PDA的条码扫码广播监听（带示例附件）](https://blog.csdn.net/weixin_35830723/article/details/117314240)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值