项目开发准备Web前端应用开发项目式教程（基于uni-app框架）
目录CONTENTS011.5任务实施1.7学习自评Part11.1任务描述1.2任务效果1.4知识储备1.8课后练习1.9任务拓展1.3学习目标1.6任务测试
本任务将完成“启嘉校园”项目开始前的开发准备工作，主要包括了解开发中使用的项目资源和项目资源使用方法，部署前、后端开发环境，以及创建项目开发目录。1.1任务描述
1.2任务效果任务效果图
1.3学习目标能力目标素养目标知识目标通过搭建项目开发环境，增强学习者的系统思维能力，培养学习者养成统筹全局的习惯。通过学习MasterGo的使用，增强学习者合理使用工具和技术的能力，养成优化方法，提高工作效率的习惯。
了解产品需求文档的作用。了解页面设计图的作用。了解字体图标的作用。了解接口文档的作用。掌握搭建前端开发环境的方法。掌握搭建后端开发环境的方法。?能够使用MasterGo查看项目设计图。?能够在Windows操作系统中安装HBuilderX。?能够在Windows操作系统中安装微信开发者工具。?能够使用HBuilderX创建uni-app项目。?能够使用HBuilderX运行项目预览效果。
1.4知识储备1.4.1产品需求文档“启嘉校园”产品需求文档为在线文档。在线文档地址：
1.4知识储备1.4.2页面设计图“启嘉校园”设计图地址：。样式标注元素间距
1.4知识储备1.4.2页面设计图“启嘉校园”设计图地址：。导出设计图
1.4知识储备1.4.3字体图标2定义使用iconfont的样式3挑选相应图标并获取字体编码，应用于页面拷贝项目面生成的font-face1unicode引用
1.4知识储备1.4.3字体图标2挑选相应图标并获取类名，应用于页面拷贝项目下面生成的fontclass代码1font-class引用
1.4知识储备1.4.4接口文档接口文档即应用程序接口的说明文档，又称为API文档，用来描述系统所提供接口信息的文档。“启嘉校园”接口文档地址：。
1.4知识储备1.4.5项目源码读者若需要完整代码可以从启嘉书盘中下载“启嘉校园”项目源码。“启嘉校园”项目源码下载地址：。
1.5任务实施1.5.1搭建前端开发环境下载安装包打开官方下载地址，点击“DownloadforWindows”进行下载解压安装包创建快捷方式打开HBuilderX将下载的HBuilderX压缩包解压到系统本地磁盘中，注意存放路径不能包含中文。在解压后的文件夹中找到HBuilderX.exe，右键创建桌面快捷方式，方便后期快速打开开发工具HBuilderX安装完成，双击桌面HBuilderX快捷方式。安装HBuilderX
1.5任务实施1.5.1搭建前端开发环境下载安装包打开官方下载地址html根据系统配置下载相应安装包安装开发者工具双击下载的exe安装包，根据提示进行安装即可安装微信开发者工具
1.5任务实施1.5.2搭建后端开发环境使用浏览器打开下载页面并下载exe安装包，下载地址为：。1.下载安装包检查系统3306端口是否被占用注意Java程序和MySQL数据库安装路径安装过程会自动修改系统环境变量2.检查安装环境双击下载的exe安装包，将自动进行安装，安装成功后会提示“安装成功”3.安装后端开发环境
1.5任务实施1.5.3创建项目开发目录设置项目名称及路径
1.5任务实施1.5.3创建项目开发目录项目默认目录结构
1.5任务实施1.5.3创建项目开发目录通过HBuilderX的“运行到小程序模拟器”功能可以运行项目预览效果.（1）在HBuilderX中配置开发者工具的安装路径：【运行】-【运行到小程序模拟器】-【运行设置】，点击“浏览”，选择微信开发者工具安装路径。