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目录下，前后端合一一起上传到服务器部署。