SpringMVC+VUE开发环境搭建

傷城~ 2022-05-13 08:26 505阅读 0赞

简单记录一下springmvc+vue搭建

1，准备好springmvc项目

重点不在这不讲太多，搭建好的结构如下：

70

2，新建front目录用于存放前端项目

进入front目录命令行

  1. # 全局安装 vue-cli
  2. $ cnpm install --global vue-cli
  3. # 创建一个基于 webpack 模板的新项目
  4. $ vue init webpack front

上面命令执行完之后安装依赖

  1. npm install
  2. 然后运行
  3. npm run dev

至此前端项目已搭建好

3，配置vue打包生成到springmvc项目下以及配置接口调用

打开front->config->index.js

proxyTable设置接口映射

如下

70 1

接着设置front启动地址和端口

70 2

最后修改build设置输出到springmvc的webapp下即可

70 3

命令行敲npm build 即会编译前端并生成html+js到springmvc

如图所示：

70 4

总结：当然静态html+js代码完全可以放到Nginx服务器上，做到完全的前后端分离，这里由于条件限制放到同一台服务器上。

发表评论

表情：
评论列表 （有 0 条评论，505人围观）

还没有评论，来说两句吧...

相关阅读

    相关 搭建开发环境

    搭建开发环境可以分为两种：         第一种是项目非常简单，可能简单到只有一两个页面就可以搞定，这时候我们就直接新建一个html页面进行开发就行         第二

    冷不防冷不防/ 0 赞/ 475 阅读

    相关 搭建开发环境

    devsever contentbase是接下来要执行的本地开发环境的服务器规定服务器要在哪里获取文件 open:true.//自动打开浏览器 port 9000 第一

    朱雀朱雀/ 0 赞/ 471 阅读

    相关 MBlock开发环境搭建

    本人对STM教育有兴趣，研究了一下mblock的代码，总结了一些个人搭建修改的经验，如果有需要进一步了解的朋友，欢迎交流，QQ：690333105，验证信息：mblock

    港控/mmm°港控/mmm°/ 0 赞/ 521 阅读