uni-app（vue3）创建项目

最新推荐文章于 2025-06-26 08:00:00 发布

原创最新推荐文章于 2025-06-26 08:00:00 发布 · 554 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

一、编译器

HBuilder X

1.如何下载

打开uniapp的官网（可单击下方链接跳转到官网）

https://zh.uniapp.dcloud.io/component/uniui/uni-forms.html

单击安装，选择要安装的版本，根据网站右侧提示进行安装

二、创建uni-app项目

1.打开HBuilder X
2.菜单→文件→新建→项目

3.在弹出的对话框中进行以下操作

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

m0_59971110

关注关注

6
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【uniapp - vue3】搭建项目模板第一章创建项目(uview-plus )

qq_39959538的博客

08-10

2121

最近Vue3正值火热，越来越成熟，想用uniapp搭建一个vue3版本的模板，记录一下如何搭建起一个uniapp-vue3的项目模板, 欢迎一起交流学习。本章能学习到的内容了解uniapp创建运行流程引入uview-plus: 快速开发的UI框架。

uni-app基础框架搭建（vue3+ts+vite）

LB_bei的博客

05-29

6896

uni-app官网uni-app,uniCloud,serverless,环境安装,创建uni-app,自定义模板,国内特殊情况,更新依赖到指定版本,运行、发布uni-app,运行并发布快应用,运行并发布快应用(webview),运行并发布快应用(webview)-华为,cli创建项目和HBuilderX可视化界面创安装node、hbuilder安装pnpm，相比于npm他的优点是：显著提升了包安装的速度和磁盘空间利用率，同时避免了依赖冲突和重复安装的问题；创建uniapp vue3+ts项目。

参与评论您还未登录，请先登录后发表或查看评论

uniapp创建vue3项目

热门推荐

weixin_57844432的博客

06-14

1万+

uniapp-VUE3-微信小程序项目

1.1使用HBuilder编辑器创建VUE3新项目

2201_75436433的博客

06-26

458

├── index.html # HTML模板。└── vite.config.js # Vite配置。├── public/ # 静态资源。│ ├── assets/ # 项目资源。│ ├── components/ # 公共组件。│ └── main.js # 入口文件。│ ├── App.vue # 根组件。1，启动HBuilderX，点击菜单栏。

uniapp+vue3搭建项目

情诗的博客

03-04

3295

在配置完后，可以发现在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。

3. 如何创建一个vue3+TS的uniapp项目

Oliver尹的博客

02-13

1108

这是我们项目的起点。为了帮助不太熟悉的小伙伴入门，本文将详细介绍如何创建项目以及如何安装必要的项目依赖。

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-...

uni-preset-vue-master uniapp项目模板

12-02

3. **脚手架工具**：uni-app提供了命令行工具，通过npm或yarn安装后，可以使用uni init命令创建新项目，选择uni-preset-vue模板，一键生成项目骨架。 4. **插件市场**：uni-app有丰富的插件市场，提供了各种组件和...

uni-app+vue3 H5 +app 实现打字机效果任务生成等

04-25

在uni-app+Vue3项目中，可以采用Vuex进行状态管理，为打字机效果和任务生成提供统一的状态管理方案。例如，当打字机效果被触发时，通过更新Vuex中的状态来触发视图更新；当任务生成或者编辑时，更新Vuex中的任务列表...

uni-preset-vue模板

12-24

【uni-preset-vue模板】是专为uni-app框架设计的一个预设模板，它简化了开发者在使用uni-app时的项目初始化过程，提供了基础的项目结构和配置，使得开发跨平台移动应用变得更加便捷。uni-app是由DCloud（即数字天堂...

使用vue-cli创建uni-app项目，vue3/vite模板

hy2356891299的博客

02-26

1026

使用vue-cli创建uni-app项目，vue3/vite模板

uniapp Vue3的创建和微信小程序的安装与应用

dengshuweng的博客

08-21

1179

在你创建好了一个uniapp项目后可以在其子目录pages的index目录下可以找打系统给我们的基础index.vue页面，这个也是我们的基础页面。如果你在一个view标签外的地方创建一个view是，其内容会在上一个view的上面或者下面，反正不是同一级的。与先前的测试结果时一样的，只是在比较多的页面内容是，先前的表示结果效果不会太好。保存你的修改，并且旁边的区域会同步你的修改结果，可以让你知道自己的修改结果。点击运行，你可以选择你需要的游览器，建议选择只带，如果没有可以下载。

uniapp cli创建vue3项目

weixin_61153206的博客

01-24

803

如果官方的创建命令创建失败的话，输入一下命令创建就行啦???? vue create -p dcloudio/uni-preset-vue#vue3 my-vue3-project

uniapp创建vue3+vite项目

solocao的专栏

01-01

769

命令行创建 Vue3/Vite 工程。本质是到git仓库下载代码。

uniapp创建Vue3项目总结

qq_39891453的博客

07-11

7335

在项目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开发：uniapp之切换vue3，一直使用一直爽

qq_42961150的博客

11-17

1万+

目录前言使用步骤 Tips 关注我，不迷路前言随着vue3.0发布以来，紧随着vue3.2又发布了，这尤大大也太厉害了吧。在这里vue3.x的优点就不多说了，反正就是爽。 uniapp也是跟紧的步伐，在前几个版本就开始支持vue3.x的使用，甚至在2.9.3的cli版本就开始支持了，更多相关信息查看官方更新日志。从 HBuilderX 3.2 起，支持创建 vue3 的 uni-app 项目，更多uniapp相关信息查看uni-app 项目支持 vue 3.0 介绍，及升级指南。用法与常规vu

uniapp创建项目——vue3+vite

h_jQuery的博客

04-12

1542

创建项目命令 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】通过 HBuilderX 创建 uni-app vue3项目

weixin_40874076的博客

09-04

1499

访问 HBuilderX 的官网首页 https://www.dcloud.io/hbuilderx.html点击首页的 DOWNLOAD 按钮选择下载正式版 -> App 开发版。

uniapp项目使用vue3

m0_67403188的博客

03-11

6144

uniapp项目使用vue3 1.首先创建普通uniapp项目 2.找到manifest.json文件vue版本选择选择3 3.重新运行提示：请确认您的项目模板是否支持vue3:根目录缺少 index.html 在根目录下创建index.html，模板已放在下方 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="view

uni-appvue3怎么创建

最新发布

07-18

<think>根据用户的问题，用户想要了解如何在uni-app中使用Vue3创建项目的步骤。结合引用内容，特别是引用[1]中详细介绍了使用命令行创建Vue3/Vite的uni-app项目的步骤，我将以此为基础进行回答。回答步骤： 1. 创建项目：使用npx degit命令创建项目，可以选择JavaScript或TypeScript作为开发语言。 2. 进入项目目录。 3. 安装依赖。 4. 运行项目。同时，引用[2]介绍了uni-app的特点，可以适当提及。引用[3]提到uni-app适合多平台开发，也可以提及。引用[4][5]提到了一些具体配置和组件使用，但用户问题集中在创建步骤，因此可以简要提及后续开发中可能用到的内容。注意：回答中需要按照系统级指令的要求，对数学表达式使用正确的格式（虽然这个问题可能不涉及数学表达式，但如果有变量等，要使用$...$格式），并且使用中文回答。另外，生成相关问题。由于用户问题不涉及数学表达式，所以主要关注项目创建步骤。回答结构： 1. 简要介绍uni-app和Vue3结合的优势（参考引用[2][3]）。 2. 分步骤说明创建过程（参考引用[1]）。 3. 补充说明项目结构（参考引用[1]中的项目结构）。 4. 运行项目。最后，生成相关问题。</think>### Uni-App 中使用 Vue 3 创建项目步骤以下是基于官方文档的详细创建流程（以 TypeScript 为例）： #### 1. **环境准备** - 安装 Node.js（≥ v14.18） - 安装 HBuilderX（官方 IDE）或使用 VS Code（需安装 `@volar` 插件） #### 2. **创建项目** ```bash # 创建 TypeScript 项目 npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project ``` - `dcloudio/uni-preset-vue#vite`：JavaScript 模板 - `dcloudio/uni-preset-vue#vite-ts`：TypeScript 模板 [^1] #### 3. **进入项目目录** ```bash cd my-vue3-project ``` #### 4. **安装依赖** ```bash npm install # 或使用 pnpm/yarn ``` #### 5. **项目结构说明** 关键文件结构如下： ``` ├── src │ ├── App.vue # 应用入口组件 │ ├── main.ts # 应用初始化脚本 │ ├── manifest.json # 跨平台配置 │ ├── pages.json # 页面路由配置 │ ├── uni.scss # 全局样式变量 │ └── pages/index # 示例页面 ├── vite.config.ts # Vite 构建配置 └── tsconfig.json # TypeScript 配置 ``` [^1] #### 6. **运行项目** ```bash # 运行到 H5 浏览器 npm run dev:h5 # 运行到微信小程序 (需配置微信开发者工具路径) npm run dev:mp-weixin ``` #### 7. **开发注意事项** - **组件使用**：通过 `npm install @dcloudio/uni-ui` 安装官方 UI 库 - **状态管理**：Vue 3 推荐使用 `Pinia`（需额外安装） - **API 调用**：使用 `uni` 前缀的原生 API，如 `uni.request()` --- ### 相关问题 1. Uni-App 中如何配置多环境变量（开发/生产环境）？ 2. 在 Uni-App + Vue 3 项目中如何实现全局状态管理？ 3. Uni-App 如何同时兼容小程序和 H5 平台的样式差异？ 4. 使用 Vite 构建 Uni-App 项目有哪些性能优化建议？ [^1]: 官方提供的模板已集成 Vite + Vue 3 + TypeScript 的最佳实践，大幅提升开发效率。 [^2]: Uni-App 的跨平台特性可显著降低多端适配成本。 [^3]: 技术栈选择需根据目标平台特性权衡，Vue 3 的组合式 API 更适合复杂应用。