uniapp创建vue3+vite项目

最新推荐文章于 2025-05-26 09:54:23 发布
最新推荐文章于 2025-05-26 09:54:23 发布
阅读量762 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 微信小程序 文章标签： uni-app vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/solocao/article/details/128513520
该文章指导如何通过命令行创建一个基于Vue3和Vite的typescript项目。首先，使用npxdegit从dcloudio/uni-preset-vue仓库下载模板。接着，进入项目目录并执行npminstall进行安装。然后，编辑package.json文件添加启动和构建的快捷命令。这些步骤帮助开发者快速设置一个面向微信小程序的开发环境。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

需求，实例化一个项目
1、命令行创建 Vue3/Vite 工程

# 创建以 typescript 开发的工程  
npx degit dcloudio/uni-preset-vue#vite-ts project

本质是到git仓库下载代码

https://github.com/dcloudio/uni-preset-vue/tree/vite-ts

2、进入工程目录

cd project

3、进行安装

pnpm install

4、增加快捷命令
在package.json中增加

"start": "uni -p mp-weixin",
"build": "uni build -p mp-weixin",
【uniapp - vue3】搭建项目模板 第一章 创建项目(uview-plus )
qq_39959538的博客
08-10 2094
最近Vue3正值火热，越来越成熟，想用uniapp搭建一个vue3版本的模板，记录一下如何搭建起一个uniapp-vue3的项目模板, 欢迎一起交流学习。本章能学习到的内容了解uniapp创建运行流程引入uview-plus: 快速开发的UI框架。
uniApp+Vue3+Vite微信小程序开发指南
青柠豆腐
06-01 7064
App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html。可查阅官方文档：https://vue-macros.dev/features/reactivity-transform.html。webstorm 下载地址：https://www.jetbrains.com/webstorm/
uniapp创建vue3项目
weixin_57844432的博客
06-14 1万+
uniapp-VUE3-微信小程序项目
vue3+ts uniapp小程序项目搭建
最新发布
qq_58235808的博客
05-26 1168
1.搭建脚手架2.安装依赖 3.配置.eslintrc.js、.eslintignore、.prettierrc.js、.prettierignore文件。9.封装请求（基于 `luch-request` 封装的统一请求模块，提供统一的接口调用方式和错误处理机制)4. 安装sass（编写sass/scss样式）store文件夹下index.ts。6.增加uiapp对ts的支持。5.对uni-ui的支持。7.环境配置.env。
uniapp创建项目——vue3+vite
h_jQuery的博客
04-12 1529
创建项目命令 npx degit dcloudio/uni-preset-vue#vite my-vue3-project 在创建新的页面时，会有模板选择。 创建常用模板： 在一下的目录下创建一个文件，将常用的模板放进去 常用的vue3初始化模板 <script setup> import { ref, toRefs, onMounted, reactive, defineProps } from 'vue' import { useRouter, useRoute } from 'vu
uni-app（vue3）创建项目
m0_59971110的博客
03-19 548
HBuilder X。
uniapp cli创建vue3项目
weixin_61153206的博客
01-24 798
如果官方的创建命令创建失败的话，输入一下命令创建就行啦???? vue create -p dcloudio/uni-preset-vue#vue3 my-vue3-project
uniapp创建Vue3项目总结
qq_39891453的博客
07-11 7260
在项目src目录中的main.js中，引入并使用uview-plus的JS库，注意这两行要放在const app = createSSRApp(App)之后。exports 等于 module.exports，相当于在js文件头部，有一个module对象，module.exports = exports；在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性。解决方法：将v-show 替换为 v-if。解决方案：配置所需要使用的第三方地图的。
uniapp + vue3 + vite 开发壁纸小程序、H5、安卓App
05-08
描述简洁地说明了这个项目或教程的目标，即利用上述技术栈（uniapp、vue3、vite）来创建壁纸应用。这表明你将学习如何结合这三个工具来开发一个多功能的应用，不仅能在微信小程序中运行，还能作为H5网站和Android...
搭建UniApp + TS + Vue3 + Vite项目
2302_77862232的博客
12-11 585
创建以 javascript 开发的工程创建以 typescript 开发的工程安装sass安装uni-ui目前为止项目已经能正常的运行了安装wot-uiwot-ui是vue3+ts编写的全端支持的ui库，组件较多，提高开发效率配置easycom自动引入组件提醒废弃了一批API，而组件库目前还未兼容，因此请确保你的sass版本为1.78.0及之前的版本。安装axios。
uniapp+vue3+typescript+vite创建项目（超详细）
weixin_57399180的博客
06-14 1万+
uniapp+vue3+typescript+vite创建项目（超详细）
移动端插件化之uniapp+vue3+vite+ts项目搭建并开发一个自己的移动端ui库，支持h5、app等
weixin_43488223的博客
02-23 2822
安装，记得先切换回淘宝镜像修改文件// 支持在Vue SFC中引入外部类型定义return {if (!if (!});return res;},return {})此时就不报错了。ok，到这里全部结束，撒花。
uniapp+vue3搭建项目
情诗的博客
03-04 3046
在配置完后，可以发现在mian.ts中引入uview-plus时会提示ts报错：无法找到模块“uview-plus”的声明文件。安装持久化插件pinia-plugin-persistedstate。为减少main.ts代码冗余，这里进行封装pinia创建和持久化。创建 api/index.ts （根据自己项目自定义文件名）在src目录下创建api/request.ts分装请求。创建store文件夹用于存放，新建user文件。中，引入并使用uview-plus的JS库。配置vite.config.ts。
uni-app基础框架搭建（vue3+ts+vite）
LB_bei的博客
05-29 6839
uni-app官网uni-app,uniCloud,serverless,环境安装,创建uni-app,自定义模板,国内特殊情况,更新依赖到指定版本,运行、发布uni-app,运行并发布快应用,运行并发布快应用(webview),运行并发布快应用(webview)-华为,cli创建项目和HBuilderX可视化界面创安装node、hbuilder安装pnpm，相比于npm他的优点是：显著提升了包安装的速度和磁盘空间利用率，同时避免了依赖冲突和重复安装的问题；创建uniapp vue3+ts项目。
uni-app系列（一）用cli创建支持Vue3/Vite的uni-app项目
清风明月的博客
12-26 3644
更新HBuilderX编译器到3.3.0+，HBuilderX 3.3.0+的编辑器支持基于 Vite 编译到小程序平台。 至此，uni-app在App/H5/小程序全平台支持Vue 3.0开发，且全平台支持Vite编译器。 用cli创建支持Vue3/Vite的uni-app项目 1、命令行创建 Vue3/Vite 工程 # 创建以 javascript 开发的工程 npx degit dcloudio/uni-preset-vue#vite my-vue3-project # 创建以 types
uniapp框架——初始化vue3项目(搭建ai项目第一步)
热门推荐
编程知识分享，主打前端
12-10 3万+
大家好，我是yma16，本文分享关于 前端vue3——实现二次元人物拼图校验。vue3 + fastapi 实现选择目录所有文件自定义上传到服务器前端vue2、vue3去掉url路由“ # ”号——nginx配置csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板认识vite_vue3 初始化项目到打包python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示。
uniapp项目中使用vue3开发多端项目实践
tigerhhzz的博客
06-21 3831
本项目中使用vue3开发多端项目实践，hbuilderx内置vue3模块，使用了vite4.x构建，编译构建项目的速度比火箭还快，超爽！pinia-plugin-unistorage 基于uniapp pinia实现多端的更简单的全局本地数据缓存。选择uni-app项目，输入项目名/路径，选择项目模板，勾选vue3版本，点击创建，即可成功创建。该插件是 pinia-plugin-persistedstate 的 uniapp 版本。点击编辑器的运行 > 运行到浏览器 > 选择浏览器。
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
qq_52602294的博客
05-02 5851
这是一个vue3配合pinia的详细教程 这里面的安装插件 尽量使用 yarn进行安装；persist有两种用法，如果persist: true 是存储全部的内容 ，把true换为paths: ['count']， 可以指定存储的数据
uniapp Vue3的创建和微信小程序的安装与应用
dengshuweng的博客
08-21 1112
在你创建好了一个uniapp项目后可以在其子目录pages的index目录下可以找打系统给我们的基础index.vue页面，这个也是我们的基础页面。如果你在一个view标签外的地方创建一个view是，其内容会在上一个view的上面或者下面，反正不是同一级的。与先前的测试结果时一样的，只是在比较多的页面内容是，先前的表示结果效果不会太好。保存你的修改，并且旁边的区域会同步你的修改结果，可以让你知道自己的修改结果。点击运行，你可以选择你需要的游览器，建议选择只带，如果没有可以下载。
使用uniapp搭建vue3+ts+Vite
04-25
很高兴回答你的问题。使用uniapp搭建vue3 ts Vite可以遵循以下步骤： 1. 安装Vite和TypeScript，可以使用npm或yarn进行安装。 2. 在uniapp项目中创建一个新的目录，用于存放Vue 3的代码。 3. 在新目录中创建Vue 3项目，推荐使用Vite创建，可以使用命令" npm init vite-app <project-name> --template vue-ts" ，其中<project-name>是项目的名称。 4. 引入新创建的Vue3项目到uniapp项目中，在uniapp项目中的pages.json文件中添加新的页面，并在其中引入新项目对应的页面组件。 5. 在uniapp项目中使用Vue router进行页面路由，可以使用命令" npm install vue-router@4 --save"来安装Vue router。 6. 在uniapp项目中通过VueX进行状态管理，可以使用命令" npm install vuex@next --save"来安装VueX。 通过以上步骤，你就可以使用uniapp搭建vue3 ts Vite了。希望能对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值