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

已于 2022-10-28 11:57:23 修改
阅读量3.1k 收藏 15
点赞数 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
版权

一、创建工程

下载官方的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元/天 解锁文章
鸿缈
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
【Vue3】实战双端招聘APP
学无止境
10-01 110
【Vue3】实战双端招聘APP
vue3-vite-ts-Vant：vue3 + vite + ts + Vant + vuex +路由器
03-04
vue3-vite-ts-Vant vue3 + vite + ts + Vant + vuex +路由器 项目详细介绍 项目预览
vue3+ts的uniapp项目中使用unplugin-vue-components自动导入组件
最新发布
weixin_70243424的博客
06-29 276
【代码】vue3+ts的uniapp项目中使用unplugin-vue-components自动导入组件。
Vue3+Ts+Vite的uniapp小程序项目中引入最新vant-weapp v1.11.2并且以后更新版本全部可用
weixin_55331484的博客
12-18 851
Vue3+Ts+Vite的uniapp小程序项目中引入最新vant-weapp v1.11.2并且以后更新版本全部可用
Vue3+Vite+Vant-UI 开发双端招聘APP(计思维3重提升)
2301_81550948的博客
12-01 88
同时，Vue3.3还提供了更多的API和工具，如Vue CLI 4.x、Vue Devtools等，协助开发者愈加便当地停止开发和管理项目。除了Vue自身的新功用和技术，相关的技术和工具也在不时开展和创新。例如，Vite是一款全新的构建工具，它应用了ES Module的特性，完成了快速的开发启动和模块热更新。总之，最新Vue3.3及相关技术为前端开发者提供了更多的工具和创新，使得应用开发愈加高效、灵敏和可维护。经过不时学习和应用这些新技术和新工具，开发者可以进步应用的质量和性能，为最终用户带来更好的体验。
撸一个vue3+vite+pinia+vant4项目
qq_38661597的博客
06-01 982
最近用vue3做一个移动端的小项目，记录一下所用，主要用到了vue3+vite+axios+pinia+vant4+Ts+echarts+sass。
vite+vue3+ts+vant 移动端
Lycoris_Red的博客
02-15 542
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
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
使用vue3+ant-design-vue+vite+ts开发的通用中后台框架，实现了权限系统.zip
01-22
Vue 3.2 -- 使用vue3+ant-design-vue+vite+ts开发的通用中后台框架，实现了权限系统、动态菜单、国际化、mock数据、表格集成快速使用等功能，简洁干净开箱即用。. 各领域数据集，工具源码，适合毕业设计、课程设计...
react移动端项目构建，react@18.2.0+react-vant+vite+axios+redux+sass
03-06
该架构已解决大部分坑，主要用于react@18.2.0移动端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、vant、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、...
基于Vite、uniapp和vantweapp的微信游戏商城小程序源码.zip
06-06
基于Vite、uniapp和vantweapp的微信游戏商城小程序源码.zip
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vite+vant+vue3新闻客户端app（三）
qq_48666244的博客
02-13 1382
通过 Axios 请求得到的数据都是 Axios 处理（JSON.parse）之后的，我们应该在 Axios 执行处理之前手动使用 json-bigint 来解析处理。JavaScript 能够准确表示的整数范围在-2^53到2^53之间（不含两个端点），超过这个范围，无法精确表示这个值，这使得 JavaScript 不适合进行科学和金融方面的精确计算。弹层渲染出来以后就只是简单的切换显示和隐藏，里面的内容也不再重新渲染了，所以会导致我们的评论的回复列表不会动态更新了。
项目实战：《智慧线上购物商城》：基于vue3+vite+vant4组件(一)
qq_52264068的博客
02-11 3548
《智慧线上购物商城》：基于vue3+vite+vant4组件(一)
vue3+vite3+vant搭建移动端简易模版
发果叁
09-30 3880
vue3.x相关的生态已经在不断的完善中，相应的UI/路由/pinia等都已成熟，新的项目也在考虑使用新版本开发了，开一个帖子记录一下搭建移动端简易模版的过程，方便以后回顾。
Vite+Vue3+Vant快速构建项目
天问博客-专注于大前端技术
12-08 1125
随着`Vue3` 和 `Vite` 版本的不断更新完善，开发体验有了质的飞跃。因此，越来越多的大厂也逐步拥抱 `Vue3`。 利用`Vite` 脚手架工具可以很轻松生成以 `Vue3` 为模板的项目，但是作为`Vue`全家桶的 `vue-router`、`vuex`、`axios`等成员，需要自己一个一个去配置。于是便自行开发了本文讲到的 `tive-cli` 脚手架模板工具，只需短短几个命令便能快速生成配置健全的`Vue3全家桶`项目，并且集成了`VantUI`，配置了`rem`移动端适配，开箱即用。
Vite 2.0 + Vue3 + Ts + Vant3移动端项目
weixin_40454791的博客
12-14 2233
Vite 2.0 搭建 Vue3 移动端项目,Vite 2.0 + Vue3 + Ts + Vant3移动端项目
uni-app中如何使用ucharts
weixin_39436129的博客
09-23 2634
uni-app中ucharts的使用
vue3+ts+vite项目使用vue3-seamless-scroll
05-11
要在Vue3+TS+Vite项目中使用vue3-seamless-scroll，可以按照以下步骤进行操作： 1. 安装vue3-seamless-scroll 可以使用npm或yarn安装vue3-seamless-scroll： ```bash npm install vue3-seamless-scroll --save ``` 或 ```bash yarn add vue3-seamless-scroll ``` 2. 引入vue3-seamless-scroll 在你的Vue组件中引入vue3-seamless-scroll： ```javascript import { defineComponent } from 'vue' import Vue3SeamlessScroll from 'vue3-seamless-scroll' export default defineComponent({ components: { Vue3SeamlessScroll } }) ``` 3. 使用vue3-seamless-scroll 在你的Vue组件中使用Vue3SeamlessScroll组件： ```html <template> <vue3-seamless-scroll> <div class="item" v-for="item in items" :key="item">{{ item }}</div> </vue3-seamless-scroll> </template> <script> import { defineComponent } from 'vue' import Vue3SeamlessScroll from 'vue3-seamless-scroll' export default defineComponent({ components: { Vue3SeamlessScroll }, data() { return { items: ['1', '2', '3', '4', '5'] } } }) </script> ``` 以上就是在Vue3+TS+Vite项目中使用vue3-seamless-scroll的步骤。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值