用HBuilderX创建项目页面介绍和配置浏览器和小程序路径

1.创建项目

先打开HBuilder点击新建项目,选择默认模板,Vue版本选择3然后创建

创建完之后追加项目时右键pages文件夹点新建页面

2.页面介绍

1.项目路径设置

项目里pages.json中可以找到页面路径path(在创建新的uni-app页面时会自动设置路径)

2.页面中的基础组件

<view>和html中的div类似用来包裹元素内容

<text>用来包裹文本

<template>页面中必须要有这个否则不能运行

在scss中可以把子元素的样式写到父元素中

3.配置浏览器和小程序

1.配置浏览器

在HBuilderX中可以使用内置浏览器和其他浏览器

1.内置浏览器

点击程序上面的-->运行-->内置浏览器,然后就开始下载插件等待一段时间后再右侧会出现一个缩小版的浏览器

如果没有下载到内置浏览器插件

点击程序上面的-->工具-->插件安装-->安装新插件然后点内置浏览器的安装

2.配置外部浏览器

点击程序上面的运行-->运行到浏览器-->选择自己使用的浏览器打开外部浏览器

在浏览器中查看详细内容(也可以看到小程序显示的页面)

如果点击浏览器没有反应看看是否配置了浏览器路径

点击工具-->设置-->运行配置找到浏览器运行配置-->浏览-->选择自己的浏览器

3.配置小程序

点击工具-->设置-->运行配置找到自己需要的小程序网站下载之后再配置路径

这个页面和我们用HBuilderX写的页面的格式是一样的所以我们可以直接用HBuilderX来写小程序

### 如何在 HBuilderX创建新的 HTML 项目 HBuilderX 是一款由 DCloud 推出的跨平台 IDE 工具,支持多种前端技术栈开发,包括 HTML、CSS JavaScript 的纯静态页面开发。以下是关于如何在 HBuilderX创建一个新的 HTML 项目的详细介绍。 #### 下载与安装 HBuilderX 为了能够顺利创建 HTML 项目,首先需要完成 HBuilderX 的下载与安装过程[^4]。访问官方网址 `https://www.dcloud.io/hbuilderx.html` 并选择适合当前操作系统(Windows/Mac/Linux)的版本进行下载。对于初学者而言,推荐下载正式版以获得稳定的功能体验。 #### 打开软件并初始化工作区 启动已安装好的 HBuilderX 后,默认会进入欢迎界面,在这里可以选择最近打开过的文件或者新建一个空白项目/工程。如果这是首次使用该程序,则可能还需要配置一些基础选项来优化用户体验。 #### 新建HTML项目步骤 1. **点击菜单栏中的“文件”-> “新建” -> “项目...”。** 2. 在弹出来的对话框里,“模板列表”部分找到名为“Web”的分类项,并在其子类别中选取最简单的“Empty Web Project”。 3. 输入项目名称以及指定存储路径之后按确定按钮即可成功建立所需的HTML类型的站点框架[^3]。 此时应该可以看到左侧资源管理器显示出了刚生成的基础目录结构,通常至少包含以下几个核心组成部分: - index.html:作为网站入口的第一个网页文档; - css/: 存放样式表单的地方; - js/: 放置javascript脚本的位置; 可以立即双击index.html 文件预览效果,也可以继续编辑其他关联资源进一步完善整个应用的内容展示逻辑等功能实现。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> ``` 以上即为利用 HBuilderX 创建全新 HTML 项目的具体流程概述。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值