uni-app 搭建开发环境,创建项目,运行项目

简介: uni-app 搭建开发环境,创建项目,运行项目

uni-app 可实现一套代码跨端编译到多个平台,通常用于移动端项目的开发,如各平台的小程序、APP、H5页面等。

搭建开发环境

  • 下载安装 HBuilderX
    使用HBuilderX进行开发时需安装
  • Windows为zip包,解压后即可使用

  • 下载安装 vscode
    使用HBuilderX进行开发时需安装
  • 下载安装微信开发者工具
    开发微信小程序时需安装

创建项目

方式一:通过 HBuilderX 创建

双击打开 HBuilderX

vue2版

vue3版

安装编译插件

方式二:通过命令行创建

js版

npx degit dcloudio/uni-preset-vue#vite 项目名称

ts版

npx degit dcloudio/uni-preset-vue#vite-ts 项目名称
  • 在 src\manifest.json 中添加 appid
  • 执行 cnpm i 安装依赖

运行项目

在HBuilderX中运行项目

先选中项目目录

查看微信小程序效果

查看内置浏览器效果

首次运行,会提示下载相关内置浏览器和SASS等插件。

待必要的插件下载完毕,再次执行即可。(若一次没运行,多点两次直到运行即可)

运行命令行创建的项目查看微信小程序效果

运行脚本

npm run dev:mp-weixin

会生成文件夹 dist\dev\mp-weixin

打开微信开发者工具,导入文件夹 dist\dev\mp-weixin 即可

修改项目代码,可实时编译查看修改效果

 

目录
相关文章
|
2月前
|
XML Java 数据库
安卓项目:app注册/登录界面设计
本文介绍了如何设计一个Android应用的注册/登录界面,包括布局文件的创建、登录和注册逻辑的实现,以及运行效果的展示。
154 0
安卓项目:app注册/登录界面设计
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
249 3
|
3月前
|
移动开发 Android开发 数据安全/隐私保护
移动应用与系统的技术演进:从开发到操作系统的全景解析随着智能手机和平板电脑的普及,移动应用(App)已成为人们日常生活中不可或缺的一部分。无论是社交、娱乐、购物还是办公,移动应用都扮演着重要的角色。而支撑这些应用运行的,正是功能强大且复杂的移动操作系统。本文将深入探讨移动应用的开发过程及其背后的操作系统机制,揭示这一领域的技术演进。
本文旨在提供关于移动应用与系统技术的全面概述,涵盖移动应用的开发生命周期、主要移动操作系统的特点以及它们之间的竞争关系。我们将探讨如何高效地开发移动应用,并分析iOS和Android两大主流操作系统的技术优势与局限。同时,本文还将讨论跨平台解决方案的兴起及其对移动开发领域的影响。通过这篇技术性文章,读者将获得对移动应用开发及操作系统深层理解的钥匙。
|
2月前
|
缓存 开发框架 移动开发
uni-app:下载使用uni&创建项目&和小程序链接&数据缓存&小程序打包 (一)
uni-app 是一个跨平台的开发框架,它允许开发者使用 Vue.js 来构建应用程序,并能够同时发布到多个平台,如微信小程序、支付宝小程序、H5、App(通过DCloud的打包服务)等。uni-app 的目标是通过统一的代码库,简化多平台开发过程,提高开发效率。 在这一部分中,我们将逐步介绍如何下载和使用uni-app、创建一个新的项目、如何将项目链接到小程序,以及实现数据缓存的基本方法。
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
109 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
4月前
|
Java 容器
【Azure Function App】Java Function在运行中遇见内存不足的错误
【Azure Function App】Java Function在运行中遇见内存不足的错误
|
4月前
【Azure Function App】本地运行的Function发布到Azure上无法运行的错误分析
【Azure Function App】本地运行的Function发布到Azure上无法运行的错误分析
|
4月前
|
Python
【Azure 应用服务】App Service的运行状况检查功能失效,一直提示"实例运行不正常"
【Azure 应用服务】App Service的运行状况检查功能失效,一直提示"实例运行不正常"
|
4月前
|
JavaScript Windows
【Azure 应用服务】用App Service部署运行 Vue.js 编写的项目,应该怎么部署运行呢?
【Azure 应用服务】用App Service部署运行 Vue.js 编写的项目,应该怎么部署运行呢?
|
4月前
|
开发框架 .NET 开发工具
【Azure 应用服务】App Service 的.NET Version选择为.NET6,是否可以同时支持运行ASP.NET V4.8的应用呢?
【Azure 应用服务】App Service 的.NET Version选择为.NET6,是否可以同时支持运行ASP.NET V4.8的应用呢?

热门文章

最新文章

下一篇
无影云桌面