# 一 ).工具介绍 本次项目中，使用的开发工具有以下几种: 1.HBuilder X； 2.微信开发者工具； 3.雷电模拟器 ## HBuilder X 官网下载地址：[https://www.dcloud.io/](https://www.dcloud.io/) 打开[HbuilderX官方](https://www.dcloud.io/hbuilderx.html)，使用 Uniapp 框架开发项目搭配官方的编辑器 HBuilderX 开发，编辑器集成了node，添加了很多底层配置。无需复杂的安装，开箱即用并且搭配了可视化界面，可以轻松编辑。  下载对应安装包（我使用的是 Windows），下载选择一个 App 开发版本（App 开发版已集成相关插件、开箱即用），下载成功后直接解压：  打开解压包找到这个图标打开，打开基本上可以达到秒开。  ## 插件配置 选择菜单 【工具】 >> 【插件安装】   安装插件： App真机运行； UniApp编译； htmlhint语法校检； stylelint语法校检； eslint-js语法校检； es6编译； 设置 ##设置字体 选择菜单 【工具】 >> 【设置】   ## 设置编辑器 在Settings.json中选择【编辑器配置 】>> 【自动换行 】>>选择【√】  ## 新建项目 【选择新建项目】 >> 【uni-app】 >> 【默认模板】 >> 【创建】；选择 uni-app(U) 创建项目是为了开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序。  成功效果：  *注意：components文件夹不是系统自动生成的，需自己创建 目录结构： * components：组件存放目录 * pages:业务页面文件存放目录 * static：静态文件目录(images之类) * App.vue： App 全局应用配置 * main.js： 初始化入口文件 * manifest.json： 多端配置信息 * pages.json ：配置页面路由、导航等信息，类似原生小程序的 app.json