uni-app开发环境配置

一、 HBuildX的介绍

HBuildX也是DCloud开发的一款编辑器，和uni-app是同一个公司开发的。可想而知，HBuildX对uni-appa支持程度极高，因此我们也就选用HbuildX作为uni-app开发的主编辑器。

二、安装HbuildX

官网下载：HBuilderX-高效极客技巧选择APP开发版
解压后即可使用
安装插件：工具=>插件安装（uni-app(vue2)编译、uni-app(vue3)编译、scss/sass编译）

三、创建第一个uni-app

启动HbuildX，文件=>新建=>项目=>选择uni-app=>填写项目名，项目路径=>选择项目模板：uni-ui项目=>点击创建

项目结构

|-- components                uni-app组件目录
|-- pages                    页面目录
|-- static                    存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
|-- main.js                 Vue入口文件
|-- App.vue                    应用全局配置文件
|-- manifest.json             配置应用名，打包版本，appid,logo等打包信息的配置文件
|-- pages.json                 配置路由，导航条，选项卡等页面信息文件
|-- index.html                 适配vue3
|-- uni.scss                 uni-app内置的常用样式变量

四、运行

1、运行到浏览器

运行到chrome浏览器：进入到uni-app=>运行=>运行到浏览器=>运行到chrome浏览器
运行到内置浏览器：安装“内置浏览器插件”=>运行=>运行到内置浏览器

2、运行到微信小程序

安装微信开发者工具，地址：稳定版 Stable Build | 微信开放文档
打开服务端口：启动微信开发者工具，点击设置图标=>安全=>打开服务端口
配置微信小程序路径：打开HbuildX，点击运行=>运行到小程序模拟器=>运行设置=>找到小程序运行配置下的微信开发者工具路径进行配置
运行：打开HbuildX，进入项目，点击运行=>运行到小程序模拟器=>微信开发者工具=>微信小程序会自动打开并运行项目

3、运行到安卓手机

将手机通过数据线连接到计算机
将手机设置为USB调试模式，不同型号手机设置方式不同，大家可以去搜索一下
运行：打开HBuildX，进入项目，单击运行=>运行到手机或模拟器=>运行-设备:Android-*****
运行后，手机会安装HBuilder应用，安装完成后，就可以预览了。

4、运行到苹果手机

Windows电脑连接苹果手机，要先安装iTunes，地址：Apple - Support - Downloads
将手机用数据线连接到电脑=>选择“信任“。
打开HBuildX，进入项目，单击运行=>手机运行=>选择iphone设备，等待编译完成，就可以预览了。

uni-app开发环境配置相关推荐

python 安卓app开发环境搭建_基于react-native的APP开发环境配置
1. 首先要有jdk 版本1.8 环境变量必须要有 %JAVA_HOME%;%JAVA_HOME%\bin 2.python 版本2 必须是python2(官方文档这么写的,具体 ...
Eclipse IDE 使用技巧和Android App 开发环境搭建和配置
写在前面: 本片文章只是记录了自己学习时的一些笔记,纯粹是为了自己后面方便查找,片言碎语,不适合大家浏览,请大家不要参考这篇文章. 正文: Eclipse IDE 使用技巧 ...
React + Typescript + Webpack 开发环境配置
对于复杂或多人开发的 React 项目来说,管理和使用每个组件的 props . state 或许会成为一件让人头痛的事情,而为每一个组件写文档,成本也会比较大,对项目的开发效率也不是最理想的. Ty ...
pycharm 开发app_windows及mac下开发Excel， python+xlwings开发环境配置
背景: 孩子他妈天天excel办公,看她每天大量重复性的工作,她是时候学习python来解放自己了,虽然我不用python ~ ~ 网络搜索 xlwings 是python下非常强大的处理Excel的 ...
atom配置python环境_用Python制作网站Django实操与开发环境配置
上篇文章简单介绍了Django的基础知识,本篇将进入实际操作部分,包括Django的运行环境.开发环境配置与新建项目等内容.由于篇幅原因,笔者不得不把Demo演示放到下一篇文章,望读者(如果有的话)见 ...
C++开发环境配置实验
C++开发环境配置实验 (出自开课吧宿船长) 因整课学习需要,并便利学生满足同样环境下的开发需要,特此设定本实验.推荐使用云主机的好处有以下内容: 环境统一,不必费心于解决由于不同环境引起的各种问题 ...
Java开发环境配置图解
java开发环境配置图解 2011-12-07 14:24 by 和尚释然, 775 visits, 收藏, 编辑 1. 正确安装jdk安装包. 2. 打开"环境变量"窗口 3. ...
记一次Qt5.12.2 Android 开发环境配置
记一次Qt Android开发环境配置文章目录记一次Qt Android开发环境配置前言一.配置需要的安装包及测试环境二.配置步骤 1安装Qt5.12.2 2.安装Java SDK 3.解压 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
erpnext v13 安装部署 + VSCode本地开发环境配置
ERPNext Version-13 安装生产环境参考链接 https://discuss.erpnext.com/t/install-frappe-erpnext-v13-beta-from-sc ...

uni-app开发环境配置

一、 HBuildX的介绍

二、安装HbuildX

三、创建第一个uni-app

四、运行

uni-app开发环境配置相关推荐

最新文章

热门文章