用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来写小程序

  • 12
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HBuilderX是一个用于前端开发的集成开发环境(IDE),可以用来创建项目。在创建项目时,可以按照以下步骤进行操作: 1. 打开HBuilderX并点击菜单栏上的"文件"选项。 2. 选择"新建",然后选择"项目"。 3. 在弹出的界面中,选择需要创建项目类型。如果要创建一个uni-app项目,可以选择uni-app。 4. 输入项目的名称和文件存储地址。 5. 在模板选项中,如果想要使用ColorUI模板,可以选择ColorUI。 6. 点击"确定"按钮,HBuilderX将会创建一个新的项目,并在项目目录中生成相应的文件和文件夹结构。 创建完毕后,项目目录中会生成一些主要的文件和文件夹,如下所示: - colorui:包含ColorUI相关的文件。 - node_modules:用于存放通过npm安装的第三方插件文件。 - pages:用于存放开发页面的目录。 - static:用于存放静态文件,如图片、logo等。 - App.vue:作为页面入口文件,用于引用全局的js、css文件。 - main.js:作为程序入口文件,用于引用需要使用的插件和公共组件。 - manifest.json:HBuilderX配置文件,用于程序发布时的配置。 - package-lock.json:第三方插件的依赖包管理文件。 - pages.json:页面配置文件,用于配置页面的属性。 通过以上步骤,您可以使用HBuilderX创建一个项目,并开始进行开发。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* *2* [前后端入门项目实战-使用HBuilderX创建项目及目录介绍](https://blog.csdn.net/weixin_44037376/article/details/100983122)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值