课程名称：运行项目工程
课程章节：运行移动端和前端项目（3）
主讲老师：神思者
运行前端项目
在线办公系统的前端项目是基于Vue3.0构建的，运行的时候需要依赖Node.js环境。把Node.js环境安装好了，接下来要做的是把前端项目导入HBuilderX工具，然后初始化，修改一下配置文件就能运行了。
1. 初始化前端项目
在Git上面下载emos-vue.zip文件，解压缩之后，用命令行工具进入到项目文件夹，执行前端项目的初始化（安装各种第三方依赖包）
cnpm install
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
4. 访问登陆画面
用浏览器打开前端项目的网址（ http://localhost:3000/#/login ），能看到登陆画面，说明前端项目启动成功。
今日学习收获：成功启动前端项目，继续加油😀
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦