uniapp创建vue3+vite项目

最新推荐文章于 2025-03-19 19:31:43 发布
原创 最新推荐文章于 2025-03-19 19:31:43 发布 · 800 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #vue.js #javascript

该文章指导如何通过命令行创建一个基于Vue3和Vite的typescript项目。首先，使用npxdegit从dcloudio/uni-preset-vue仓库下载模板。接着，进入项目目录并执行npminstall进行安装。然后，编辑package.json文件添加启动和构建的快捷命令。这些步骤帮助开发者快速设置一个面向微信小程序的开发环境。

需求，实例化一个项目
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 2211
最近Vue3正值火热，越来越成熟，想用uniapp搭建一个vue3版本的模板，记录一下如何搭建起一个uniapp-vue3的项目模板, 欢迎一起交流学习。本章能学习到的内容了解uniapp创建运行流程引入uview-plus: 快速开发的UI框架。
uniApp+Vue3+Vite微信小程序开发指南
青柠豆腐
06-01 7756
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+vite
h_jQuery的博客
04-12 1601
创建项目命令 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
uniapp创建vue3项目
weixin_57844432的博客
06-14 1万+
uniapp-VUE3-微信小程序项目
uni-app（vue3）创建项目
m0_59971110的博客
03-19 604
HBuilder X。
uniapp cli创建vue3项目
weixin_61153206的博客
01-24 869
如果官方的创建命令创建失败的话，输入一下命令创建就行啦???? vue create -p dcloudio/uni-preset-vue#vue3 my-vue3-project
精选资源
uniapp + vue3 + vite 开发壁纸小程序、H5、安卓App
05-08
描述简洁地说明了这个项目或教程的目标，即利用上述技术栈（uniapp、vue3、vite）来创建壁纸应用。这表明你将学习如何结合这三个工具来开发一个多功能的应用，不仅能在微信小程序中运行，还能作为H5网站和Android...
搭建UniApp + TS + Vue3 + Vite项目
2302_77862232的博客
12-11 715
创建以 javascript 开发的工程创建以 typescript 开发的工程安装sass安装uni-ui目前为止项目已经能正常的运行了安装wot-uiwot-ui是vue3+ts编写的全端支持的ui库，组件较多，提高开发效率配置easycom自动引入组件提醒废弃了一批API，而组件库目前还未兼容，因此请确保你的sass版本为1.78.0及之前的版本。安装axios。
移动端插件化之uniapp+vue3+vite+ts项目搭建并开发一个自己的移动端ui库，支持h5、app等
weixin_43488223的博客
02-23 3006
安装，记得先切换回淘宝镜像修改文件// 支持在Vue SFC中引入外部类型定义return {if (!if (!});return res;},return {})此时就不报错了。ok，到这里全部结束，撒花。
uniapp+vue3+typescript+vite创建项目（超详细）
weixin_57399180的博客
06-14 1万+
uniapp+vue3+typescript+vite创建项目（超详细）
uniapp创建Vue3项目总结
qq_39891453的博客
07-11 7647
在项目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搭建项目
情诗的博客
03-04 4070
在配置完后，可以发现在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 7142
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 3724
更新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 4150
本项目中使用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 6299
这是一个vue3配合pinia的详细教程 这里面的安装插件 尽量使用 yarn进行安装；persist有两种用法，如果persist: true 是存储全部的内容 ，把true换为paths: ['count']， 可以指定存储的数据
uniapp Vue3的创建和微信小程序的安装与应用
dengshuweng的博客
08-21 1582
在你创建好了一个uniapp项目后可以在其子目录pages的index目录下可以找打系统给我们的基础index.vue页面，这个也是我们的基础页面。如果你在一个view标签外的地方创建一个view是，其内容会在上一个view的上面或者下面，反正不是同一级的。与先前的测试结果时一样的，只是在比较多的页面内容是，先前的表示结果效果不会太好。保存你的修改，并且旁边的区域会同步你的修改结果，可以让你知道自己的修改结果。点击运行，你可以选择你需要的游览器，建议选择只带，如果没有可以下载。
uniapp 使用vite构建项目
m0_67880202的博客
06-30 1419
（3）App.vue 引入基础样式（注意style标签需声明scss属性支持）（4）uni.scss 引入全局 scss 变量文件。（2）在main.js中引入vk-uview-ui。（1）使用hbuilder导入插件。
vscode创建uniapp+vue3+i18n+vite
最新发布
07-25
### 创建 UniApp 项目并集成 Vue3、i18n 和 Vite 要使用 VSCode 创建一个 UniApp 项目，并集成 Vue3、i18n 国际化和 Vite 构建工具，可以按照以下步骤进行操作。 #### 安装 Node.js 和 npm 确保系统中已安装 Node....
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值