springboot——（6）添加一个vue项目调用springboot接口

前两篇博文描述了node.js下载安装、cnpm创建vue项目相关内容，我们得到了一个能运行的最基础的vue框架。具体博文如下：

https://blog.csdn.net/qq_15903671/article/details/82052035

https://blog.csdn.net/qq_15903671/article/details/82052251

vue项目命令行常用指令：

vue init webpack projectPathAndName  (创建项目)

cd projectPathAndName （进入项目根目录）

cnpm install （初始化项目，生成node_modules文件夹并下载依赖）

cnpm run dev （运行项目）

由于在学习springboot，前端计划使用vue并与springboot实现分离。现在使用IDEA导入vue项目，编译项目，发布运行。

一、IDEA打开创建好的vue项目：

file-open 选择创建好的vue项目根目录，打开后项目结构如图

二、IDEA配置、支持vue项目：

首先下载vue.js的plugin：File -> Settings -> Plugins -> Browse respositoties 如图所示

install安装。

HTML 添加 *.vue类型的识别：

File -> Settings -> Editor -> File Types -> HTML 右下方的+号，

添加*.vue文件。注意，添加后IDEA会自动重启。

新建*.vue文件模板

File -> Settings -> Editor -> File and Code Templates -> +

添加好模板之后，再创建vue文件就方便多了，如下图

在新建文件时，可以看到Vue File类型，选中后直接按照模板创建新的*.vue文件。

至此，已经可以方便的在IDEA下编辑vue项目了，我们稍微添加一点代码，调用我们之前创建的springboot项目接口，如果没有按照我之前的博文创建springboot项目的化可以跳过。

三、IDEA添加前端页面调用springboot接口。

在helloword.vue文件中添加如下代码。只是简单的把我们之前做springboot项目的接口连接配进去。

  

    
      test
    
  

href留意写你自己的url，然后启动原来的springboot项目，开放接口server出来，注意当前的vue端口默认是8080 的，我们的springboot项目要修改端口号，如果也使用8080则将导致vue项目无法运行。

四、发布vue项目

编辑好后可以尝试使用IDEA直接运行。Run - Edit Configurations，点击+号，选择npm，设置name，package.json配置当前项目的json文件，IDEA默认识别，command设置为run,scripts设置为dev，点击OK。

配置好后就可以在IDEA上直接启动vue项目了。

看下效果

下方出现了我们刚加的test连接，点击将调用我们之前开发的springboot接口

 

好了，IDEA下我们的vue项目导入、编辑、运行成功。实测可以调用原springboot项目接口，本人比较偏向后台开发，前端实在不熟悉，就不做更详细的前端教程了，接口调用成功，任务完成。