idea中启动vue项目及前后端分离浏览器调试技术分享

开发工具idea,前端框架vue,需要安装node.js以及vue-cli;

一、在IDEA中配置vue插件

点击File–>Settings–>Plugins–>搜索vue.js插件进行安装,安装完成后重启idea。见图1:
在这里插入图片描述
图一

二、搭建node.js环境

安装node.js 可以去官网下载(https://nodejs.org/zh-cn/):安装过程就很简单,直接下一步就行。见图2-1
在这里插入图片描述
图2-1

测试是否安装成功:要使用管理员方式打开命令行cmd
输入node -v如果出现版本号,则说明安装成功,npm包管理器是集成在node中的,所以,直接
输入npm -v 就会显示npm版本信息,说明node环境已经安装成功。见图2-2
在这里插入图片描述
图2-2

三、安装cnpm

在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像。
在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org然后等待安装,安装完成之后,我们就可以用cnpm代替npm来安装依赖包了。见图3
在这里插入图片描述
图3

四、安装vue-cli脚手架构建工具

使用如下命令
cnpm i -g vue-cli
见图4-1:
在这里插入图片描述
图4-1
测试是否安装成功,输入命令vue -V。见图4-2:
在这里插入图片描述
图4-2

五、构建运行项目

新建工作空间文件夹workspace,需要在命令行中,cd workspace到项目目录中去
然后需要输入命令:vue init webpack front (这里命令的意思是初始化一个项目,项目名称是front,其中webpack是构建工具,
也就是整个项目时基于webpack的)
运行命令初始化的时候会让用户输入几个基本的选项,如项目名称、描述、作者等信息。见图5
在这里插入图片描述
图5

六、安装项目依赖资源

进入项目目录
cd front
初始化项目
cnpm install
见图6-1
在这里插入图片描述
图6-1
运行项目
npm run dev
见图6-2
在这里插入图片描述
图6-2
本地访问vue项目http://localhost:8080
见图6-3
在这里插入图片描述
图6-3
至此,vue开发环境搭建成功!下面介绍idea内启动从git导出的前端vue项目。

七、本地启动项目

首次打开cmd命令界面,cd目录进入项目文件夹front_develop,执行cnpm install安装项目依赖资源。
打开已经安装好的idea软件,open从git上导出的front_develop项目。见图7-1
在这里插入图片描述
图7-1

idea配置node.js&npm环境启动项目,点击add Configuration》》点击+》》选择npm》》选择启动命令,node.js路径,npm路径》》点击apply,ok,配置如下图。见图7-2
在这里插入图片描述
图7-2

Idea配好vue项目启动环境后,点击start启动项目。见图7-3
在这里插入图片描述
图7-3
本地访问front项目http://localhost:8080
见图7-4
在这里插入图片描述
图7-4
由于本地开发环境和服务器部署环境的差异导致连接不到后台数据,所以报错。

八、本地开发配置修改

下面介绍临时修改本地环境,在本地访问后台数据,绕开单点登录,实现登录开发环境。
front_develop项目仅需修改3出配置
修改首页配置index.js。见图8-1
在这里插入图片描述
图8-1

修改配置ajax请求时携带cookie,main.js。见图8-2
在这里插入图片描述

修改配置后端访问地址http://localhost:8081,urlConfig.js。见图8-3
在这里插入图片描述
图8-3

main_develop项目仅需修改3出配置
修改后端代码允许跨域,application-dev.properties。见图8-4
在这里插入图片描述
图8-4

修改配置文件路径application-dev.properties。见图8-5
在这里插入图片描述
图8-5
启动front_develop和main_develop项目(java后端项目),本地访问http://localhost:8080。见图8-6
在这里插入图片描述
图8-6
登陆成功后的页面,见图8-7
在这里插入图片描述
图8-7

九、本地开发调试代码

idea本地调试前端代码需要安装插件,这里介绍常用的浏览器调试方法。
在需要调试的本地代码中加入一行debgger,即可进入调试的断点,在浏览器端启动调试模式进行开发代码调试。
OrderPlanCompute.Vue加一行degger,打一个断点。见图9-1
在这里插入图片描述
图9-1

打开浏览器Fn+Ctrl开启调试模式,点击查询按钮进入调试模式。见图9-2
在这里插入图片描述
图9-2
开发只需反复的修改代码,调试页面样式就可以达到预期的效果。

十、本地打包

idea配置node.js&npm环境启动项目,点击edit Configuration》》点击+》》选择npm》》选择build命令,node.js路径,npm路径》》点击apply,ok,配置如下图。见图10-1
在这里插入图片描述
图10-1

点击build按钮,开始构建项目包文件。见图10-2
在这里插入图片描述
图10-2

注意:服务器部署时需要将构建生成的dist文件夹下的文件复制到main_develop项目下的static目录下,前后端合一一起上传到服务器部署。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值