uni-app开发Hbuilder X的基本使用_uniapp hbuilder

前言

uni-app简介

        uni-app概述：uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

        uni-app由来：是为了解决跨平台开发的问题。在移动应用开发中，不同平台（如iOS、Android）有不同的开发语言和技术栈，这导致开发者需要针对不同平台开发多套代码，增加了开发和维护的成本。DCloud公司正是看到了这些问题，因此决心打造一款终极的跨平台解决方案，此时，uni-app就应运而生，Uni-app的出现使得开发者可以使用同一套代码，快速地部署到多个平台，提高了开发效率和降低了开发成本。

uni-app特点：

1、跨更多平台

2、一套代码，多平台运行

3、运行体验好，性能高

4、开发生态、周边生态丰富（组件丰富）

5、通用技术栈，学习/开发成本低。

uni-app官网：https://dcloud.io/

        在uni-app官网中为我们介绍了uni-app常用的开发工具：Hbuilder X

        Hbuilder X介绍

        HBuilder X 是一个全能的 HTML5 程序开发工具，其功能非常强大，其特点有：

        

1. 高效的开发体验：HBuilder X 集成了众多功能强大的插件和工具，让开发者的工作更加高效。同时，它还提供了丰富的代码提示和自动补全功能，快速定位代码错误，提高开发效率。

2. 多平台支持：HBuilder X 可以同时支持 iOS 和 Android 平台的程序开发，开发者只需要编写一次代码，就可以打包成多个平台的应用程序。

3. 实时预览功能：HBuilder X 提供了实时预览功能，让开发者在开发过程中可以随时查看自己的程序效果，提高开发效率。

4. 多语言支持：HBuilder X 支持多种语言的开发，包括 HTML、CSS、JavaScript、TypeScript 等。

5. 跨平台开发：HBuilder X 支持跨平台开发，开发者可以使用一套代码开发多个平台的应用程序，大大节省时间和开发成本。

        这里是HBuilder X的下载地址：​​​​​​https://www.dcloud.io/hbuilderx.html

HBuilder X的使用

环境搭建

下载好HBuilder X后我们需要配置一下环境才能正常运行项目，接下来简单配置一下HBuilder X的环境

点击最上方工具选项，并在其下拉列表中选择设置

点击运行配置选项

在自己需要的运行配置上输入相应的路径，windows自带的edge浏览器不需要配置也能运行。

创建项目

        下载好HBuilder X并打开，点击左上角的文件就可以创建项目

        

当然也可以根据自己的需要创建其他的文件。

点击创建项目后，会有项目中对应的选项供我们选择：

左侧列表能选择项目类型，默认的是创建uni-app项目，右侧能让我们输入项目名称，选择项目路径，选择项目的基础模板，启用uni-app x、启用uniCloud、将代码上传岛托管平台以及选择vue的版本等。

当项目创建成功后，页面左边列表会显示出我们创建成功的项目：

可以看到创建的基础项目是有文件存在的，而在官方文档中也为我们介绍了这些文件的作用：

也可以按照自己的需求增加页面，右键pages：

点击新建页面，就可以对我们要新建的页面进行一些属性选择。

运行项目

环境配置完成，项目也创建成功，接下来就来试着运行项目。

进入到pages的index页面，里面有一些默认的模板代码，点击上方选择栏中的运行就可以开始运行这个项目。

可以根据自己的需求选择运行到哪个平台，这里就演示运行到谷歌浏览器。

下方控制台显示代码正在编译，运行成功后会自动弹出窗口。

项目成功运行。

基础操作介绍到这里，更多操作请前往官网学习：https://dcloud.io/