Emos工程的3个项目已经运行起来了，这节课咱们来把移动端和前端项目运行起来。有不少同学是从我上一门实战课《SpringBoot在线办公小程序》学过来的，其实运行小程序项目还是很简单的。

一、运行小程序项目

emos-wx项目是基于uni-app架构的移动端项目，我们需要把uni-app项目编译成微信小程序来运行。当然了，因为uni-app是跨平台的移动端框架，所以项目还可以编译成安卓APP、iOS App、H5 App等等，这里咱们暂且把项目编译成微信小程序运行。

因为后续我们要在真机上面运行微信小程序，所以大家手机系统要保证是安卓或者iOS，千万不要用非主流的鸿蒙系统。现在鸿蒙系统还不健全，会出现很多兼容性问题。例如鸿蒙系统内部字符集不是UTF-8，所以导致小程序提交数据给后端Java项目会出现字符集异常。切记，要用主流的手机系统运行小程序。

1. 安装微信开发者工具

我们要想运行和开发微信小程序，必须要安装微信开发者工具。这个软件你可以到微信小程序的官网下载（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html），大家尽量安装稳定版本。

软件安装的过程很简单，大家选择默认设置即可。初次使用该软件，需要用微信扫描二维码才能使用。接下来我们要打开微信开发者工具的服务端口，只有这样，将来HBuilderX才能通过开放的服务端口，调用微信开发者工具运行编译好的微信小程序项目。

点击微信开发工具右上角的“齿轮图标”，在弹出的设置面板中开启服务端口。

因为服务端口是随机分配的，所以大家不用纠结为什么自己的端口跟老师的不一致。

顺便把开发工具的主题设置成浅色。我强烈不建议大家使用深色的主题，无论是什么IDE，都应该使用浅色主题。深色主题调试程序体验太差了，有些文件或者代码明明标记了红线，但是在深色主题里面，这些报错提示信息很难被发现，严重影响编程调错。

#### 2. 运行HBuilderX工具

HBuilderX软件解压缩就可以直接使用，默认的编辑器字体比较小，你可以自己手动设置字体大小。最重要的是设置微信开发者工具的安装目录（注意是目录地址，不是EXE文件的地址）

3. 导入小程序项目

下载Git上面的项目，把emos-wx项目导入HBuilderX工具。

找到项目中的`manifest.json`文件，找到微信小程序配置，把你自己的微信小程序appid填写到文本框中。

找到`main.js`文件，把其中的13行和14行的IP地址，修改成对应的项目的IP地址。把18行填写上你自己的TRTC的appid字符串。

运行emos-wx项目，如果小程序能运行，则说明移动端项目运行成功

二、运行前端项目

在线办公系统的前端项目是基于Vue3.0构建的，运行的时候需要依赖Node.js环境。上一章我们已经把Node.js环境安装好了，我们要做的是把前端项目导入HBuilderX工具，然后初始化，修改一下配置文件就能运行了。

1. 初始化前端项目

在Git上面下载emos-vue.zip文件，解压缩之后，用命令行工具进入到项目文件夹，执行前端项目的初始化（安装各种第三方依赖包）

cnpm install

如果项目初始化的过程中出现了断网或者下载的依赖包有问题，可以删除项目中的node_modules文件夹，然后重新执行初始化命令。

2. 导入前端项目

用HBuilderX工具导入前端项目，然后找到src目录中的main.js文件，其中的第89行是后端emos-api项目的URL地址。前端项目发送的Ajax请求都是发给这个后端项目。现在我们把emos-vue和emos-api都运行在你本地主机上面，所以这里第89行的URL地址不需要改动。如果将来你的前端项目和后端项目采用分布式部署的话，这里的URL地址就要修改了。

​

3. 运行前端项目

进入到前端项目的目录，然后执行下面的命令，就能启动前端项目。原来Vue2.0阶段用的是Webpack技术，每次启动项目都要让我们等待一两分钟的编译时间。我们的前端项目用上了Vue3.0，它是基于Vite技术构建的，运行的时候不需要再编译了，所以基本上可以1秒钟启动。

npm run dev

为什么原来前端项目能运行，今天就不能运行了？
这是因为你把前端项目移动位置了。只要移动前端项目，就需要先删除node_modules目录，然后重新执行前端项目初始化操作，所以轻易不要随便移动项目。

4. 访问登陆画面

用浏览器打开前端项目的网址（http://localhost:3000/#/login），能看到登陆画面，说明前端项目启动成功。