uniapp开发微信小程序-1.工具和本地环境 往期文章： uniapp开发微信小程序-1.工具和本地环境 uniapp开发微信小程序-2.页面制作 一、前言 我为什么学习uniapp？ uniapp的好处不用我说，多端开发效率的提升等等作用，近期在了解uniapp的你一定比我记得清楚。所以我就只说说我是带着哪些目的进行uniapp学习的。 首先 ，我希望在微信小程序的制作过程中使用之前掌握到的 vue。我不希望在微信小程序中重新学习如何将vue项目引入到微信小程序，而且我担心 wx- 前缀与 v- 前缀冲突等等原因（我没有试过，但这是想想就头疼的问题，不愿尝试）。 其次 ，因为开发效率的原因，我深深地被uniapp多端开发的优势所吸引（就像小学你不想写计算题的时候，老师说今天可以用计算器一样）。虽然你不得不去掌握这个“计算器”的使用方法，但是你写作业的速度确实快了许多。这也是我不在研究如何在微信小程序中引入vue的动力。 最后 ，不知道是不是我记错了，总感觉最近学习的什么东西是支持好多框架的，而现在查阅uniapp官方文档时发现uniapp就是是基于vue进行开发的（见下方uniapp官网截图）。所以大家在学习前可能需要确认是否掌握了vue，没有掌握当然也是可以跟此文章一起学习的。 总结一下以上内容，我的项目是根据vue项目查阅文档学习完成的，对使用vue的朋友比较友好，如果你学习的是其他种类，查阅文档还是更有利于学习，我的项目流程当然也是可以参考下的：）。  二、环境与工具 1.HBuilderX与项目启动 首先，我想说HBuilderX不是必要的，但确实可以大大提高我们的开发效率，如果你的电脑还有比较大的内存，建议到官网直接下载使用。 [HBuilder在uniapp官网上的下载地址-https://www.dcloud.io/hbuilderx.html](https://www.dcloud.io/hbuilderx.html) 我接下来要记录的是HBuilderX与项目启动，大家如果不愿意使用这个编辑软件，可以使用vue-cli脚手架进行项目启动，这个是官方文档关于Vue脚手架的项目启动地址https://uniapp.dcloud.io/quickstart-cli.html。  我大学时使用的第一个编辑软件是HBuilder，当时已经发布了X版本，那个时候不懂终端面板，单纯地使用HBuilder的白色皮肤进行开发静态页面，所以一直没有使用过X版本。心理上对当时开发的内容有些阴影，导致我现在任何编辑软件始终都在用黑色的皮肤，但是对HBuilder还是有一种怀念。  HBuilderX基本上是为uniapp量身定做的。 我们可以使用它直接创建一个uniapp项目，文件-新建-项目。  新建一个uniapp项目，起个名字，放个位置，点击创建即可。我选的是默认模板，大家对其他模板感兴趣可以试试。  此时，项目创建完成，因为是微信小程序，所以我们会在微信开发者工具进行调试。 2.微信开发者工具 去[微信官方文档-https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)下载。  下载完成后打开微信开发者工具，随便创建一个项目（主要是为了打开编辑页面），导航栏-设置-安全设置。  将“服务端口”打开，这样HBuilderX就可以连接微信开发者工具，后期进行页面开发的调试。  3.HBuilderX连接微信开发者工具 在HBuilder中，点击我们创建的项目，随便打开一个文件（告知uniapp我们要启动哪个项目），菜单栏-运行-运行到小程序模拟器-微信开发者工具。  首次点击会询问软件地址，我这里不会出现，如果设置错了可以通过菜单栏-工具-设置进行修改：  找到运行配置，修改微信开发者工具的软件地址：  修改并保存后，配置完成，可以进行运行测试。 4.运行  再次进行运行操作，完成准备工作：  三、总结 以上就是项目开始前的准备工作，同时，由于uniapp是基于vue进行开发的，所以我们编辑uniapp项目可以直接使用Vue，无需引入等工作，项目中已经有了Vue。 下篇文章我们进行开发。