为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第18天 SpringBoot+Vue3...

【九月打卡】第18天 SpringBoot+Vue3 项目实战(9)

2022.09.22 22:24 28浏览

课程名称:运行项目工程

课程章节:运行移动端和前端项目(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 ),能看到登陆画面,说明前端项目启动成功。

图片描述

今日学习收获:成功启动前端项目,继续加油😀

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
0
获赞与收藏
0

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消