目录

一、什么是HBuilder

二、环境的搭建

1.安装Hbuilderx

2.运行PeachHtmlTemplate  

3.安装Nodejs和Vue

4.运行PeachVueTemplate

三、项目的创建

四、VUE项目

1.什么是VUE

2.VUE常用标签

3.VUR指令

4.思维概括图

---

一、什么是HBuilder

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

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

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

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

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

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

6. 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  

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

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

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

   npm install
   

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

   npm run build
   

5. 运行项目
6. 在浏览器中查看：在浏览器中访问命令行输出中提供的 URL

3.安装Nodejs和Vue

1. 安装 Node.js：

   • 访问 Node.js 官网（https://nodejs.org）。
   • 下载与你操作系统匹配的 Node.js 安装包。
   • 双击下载的安装包，按照安装程序的提示进行安装。
   • 安装完成后，在命令行终端输入以下命令，验证 Node.js 是否成功安装：

     node -v
     npm -v
     

     如果能够正常显示 Node.js 和 npm 的版本号，则表示 Node.js 安装成功。

2. 安装 Vue CLI：

   • 在命令行终端输入以下命令，安装 Vue CLI（Vue 的命令行工具）：

     npm install -g @vue/cli
     

   • 等待安装完成后，输入以下命令，验证 Vue CLI 是否成功安装：

     vue --version
     

     如果能够正常显示 Vue CLI 的版本号，则表示 Vue CLI 安装成功。

3. 创建 Vue 项目：

   • 在命令行终端切换到你想要创建 Vue 项目的目录。
   • 输入以下命令创建一个新的 Vue 项目：
      

     vue create project-name
     

   • 在创建项的过程中，会提示选择一些配置选项，如预设配置、插件等。你可以根据自己的需要进行选择，也可以使用默认选项。
      
   • 等待项目创建完成后，进入项目目录：

     cd project-name
     

4. 运行 Vue 项目：

   • 在项目目录下，输入以下命令来启动开发服务器：

     npm run serve
     

   • 等待服务器启动成功后，在浏览器中访问提供的 URL（如 http://localhost:8080），即可查看运行中的 Vue 应用程序。

4.运行PeachVueTemplate

1. 在你的电脑上安装Node.js和npm。
2. 下载PeachVueTemplate代码，并解压缩到指定的文件夹。
3. 使用命令行工具（如Windows下的cmd或PowerShell、macOS和Linux下的Terminal），进入解压缩后的文件夹。
4. 在命令行中输入命令npm install，安装项目的依赖项。
5. 安装完依赖项后，输入命令npm run serve，启动项目。
6. 打开浏览器，输入地址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.思维概括图