HBuilder 知识点梳理

目录

一、什么是HBuilder

HBuilder 是一款国内知名的前端开发工具，提供了集成开发环境（IDE）以及多种工具和插件，方便开发者进行 Web、移动端和桌面端应用的开发和调试。

HBuilder 是基于 Eclipse 平台开发的，使用 HTML5+ 技术栈进行开发，支持多种前端开发语言和框架，如 HTML、CSS、JavaScript、Vue、React、Uni-app 等。

HBuilder 提供了丰富的代码编辑功能，包括代码智能提示、代码格式化、代码片段、代码折叠等，提高开发效率和代码质量。

HBuilder 集成了调试工具，支持实时预览和调试效果，如在浏览器中实时查看和调试页面效果，在手机预览和调试移动端页面等。

HBuilder 支持多平台开发，可以通过插件集成开发和打包发布到多个平台，如微信小程序、App、H5 网页、桌面应用等。

HBuilder 可以通过插件扩展功能，如通过插件支持代码版本管理、构建工具、UI 框架集成等，提供更丰富的开发环境和工具支持。

HBuilder 支持云端开发和分享，可以将项目保存到云端，并与团队成员共享和协作开发。

二、环境的搭建 1.安装Hbuilderx

1.1下载安装包：首先，你需要前往 HBuilderX 的官(）载适合你系统的安装包。HBuilderX 支持 Windows、Mac 和 Linux。

1.2运行安装包：下载完成后，运行安装包，根据系统提示进行安装。请注意，如果你是 Windows 用户，可能需要以管理员身份运行安装程序。

1.3安装过程：按照安装程序的指引进行安装。可以选择安装目录、选择语言、选择启动菜单等。根据自己的需求进行设置。

1.4启动 HBuilderX：安装完成后，一般会在桌面或开始菜单中生成 HBuilderX 的快捷方式。双击快捷方式启动 HBuilderX。

1.5开始使用：安装和更新完成后，你就可以开始使用 HBuilderX 进行前端开发了。可以创建新的项目、导入已有的项目，使用工具栏和菜单进行开发等。

2.运行PeachHtmlTemplate

下载并解压：首先，你需要从 PeachHtmlTemplate 的官方网站或其他可靠来源下载模板的压缩包（通常以.zip或.tar.gz格式提供）。下载完成后，将压缩包解压到你的项目目录或任意你想放置的目录。

打开命令行终端：在你的系统中打开命令行终端，确保你已切换到正确的目录，即压缩包解压后的目录。

安装依赖：运行以下命令安装可能需要的依赖项：

npm install

构建项目：运行以下命令构建项目：

npm run build

运行项目在浏览器中查看：在浏览器中访问命令行输出中提供的 URL 3.安装Nodejs和Vue

安装 Node.js：

安装 Vue CLI：

创建 Vue 项目：

运行 Vue 项目：

4.运行PeachVueTemplate 在你的电脑上安装Node.js和npm。下载PeachVueTemplate代码，并解压缩到指定的文件夹。使用命令行工具（如Windows下的cmd或PowerShell、macOS和Linux下的Terminal），进入解压缩后的文件夹。在命令行中输入命令npm install，安装项目的依赖项。安装完依赖项后，输入命令npm run serve，启动项目。打开浏览器，输入地址:8080，即可查看PeachVueTemplate项目的运行效果。 三、项目的创建

1.创建HTML文件

结构：head(标签头)、body(主体)

标签：div(放内容)、h1(改变字体大小)、span(行)、ul=li(无序列表)等

2.创建CSS文件

标签：style(放内容)、color(字体颜色)、backgroud-color(北京颜色)、font(文本)

3.创建JS文件

四、VUE项目 1.什么是VUE

Vue（通常称为Vue.js）是一种流行的JavaScript前端框架，用于构建用户界面。它专注于视图层，提供了一套响应式的组件化架构，使开发者能够更轻松地构建交互式的Web应用程序。

2.VUE常用标签

data:{//定义变量}

data中变量之间不能互相访问、this->window

methods:{//定义方法}

this.变量名 访问data中的数据、this->Vue实例

watch

监听data中数据的变化，监听路由的变化

一个数据影响到多个数据的变化

computed

计算属性得到的结果会缓存，方便下次使用

多个数据影响一个数据变化

props

可以是数组或对象类型，用于接受来自父组件的数据

3.VUR指令

stop:阻止

prevent: 阻止默认行为

capture: 捕获事件

once: 智能触发一次

self: 点击当前元素时触发事件

4.思维概括图