目录
一、什么是HBuilder
二、环境的搭建
1.安装Hbuilderx
2.运行PeachHtmlTemplate
3.安装Nodejs和Vue
4.运行PeachVueTemplate
三、项目的创建
四、VUE项目
1.什么是VUE
2.VUE常用标签
3.VUR指令
4.思维概括图
一、什么是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 的官(https://www.dcloud.io/hbuilderx.html）载适合你系统的安装包。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：
- 访问 Node.js 官网（https://nodejs.org）。
- 下载与你操作系统匹配的 Node.js 安装包。
- 双击下载的安装包，按照安装程序的提示进行安装。
- 安装完成后，在命令行终端输入以下命令，验证 Node.js 是否成功安装：
node -v
npm -v- 安装 Vue CLI：
- 在命令行终端输入以下命令，安装 Vue CLI（Vue 的命令行工具）：
npm install -g @vue/cli- 等待安装完成后，输入以下命令，验证 Vue CLI 是否成功安装：
vue --version- 创建 Vue 项目：
- 在命令行终端切换到你想要创建 Vue 项目的目录。
- 输入以下命令创建一个新的 Vue 项目：
vue create project-name- 在创建项的过程中，会提示选择一些配置选项，如预设配置、插件等。你可以根据自己的需要进行选择，也可以使用默认选项。
- 等待项目创建完成后，进入项目目录：
cd project-name- 运行 Vue 项目：
- 在项目目录下，输入以下命令来启动开发服务器：
npm run serve- 等待服务器启动成功后，在浏览器中访问提供的 URL（如
http://localhost:8080），即可查看运行中的 Vue 应用程序。
4.运行PeachVueTemplate
- 在你的电脑上安装Node.js和npm。
- 下载PeachVueTemplate代码，并解压缩到指定的文件夹。
- 使用命令行工具（如Windows下的cmd或PowerShell、macOS和Linux下的Terminal），进入解压缩后的文件夹。
- 在命令行中输入命令
npm install，安装项目的依赖项。 - 安装完依赖项后，输入命令
npm run serve，启动项目。 - 打开浏览器，输入地址
http://localhost: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.思维概括图
