java web开发（和vue联合开发）

前面我们谈到了很多次vue，也说到了vue的很多优点。比如说，vue实现了mvc中全部v的功能，也就是view的部分。这样，后端开发就变得很简单，前后端之间只要实现json数据的传递就可以了。因为在之前，我们学习了vue，也学了idea下的webapp开发，今天正好可以一起来研究下，怎么把vue和servlet开发整合在一起调试。

1、创建vue工程

1.1 创建一个demo vue工程

D:\github\vue-element>vue init ./webpack_git demo? Project name demo
? Project description A Vue.js project
? Author feixiaoxing <feixiaoxing@163.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) novue-cli · Generated "demo".# Project initialization finished!
# ========================To get started:cd demonpm install (or if using yarn: yarn)npm run dev

因为这部分内容，之前已经涉及过，所以不打算重复了。要实现vue创建工程，有三个部分需要做好。第一，安装好node.js；第二，安装好vue-cli；第三，下载好webpack的模板。

1.2 利用npm安装好第三方模块

D:\github\vue-element>cd demoD:\github\vue-element\demo>npm install

1.3 运行网站，查看是否可以正常输出

D:\github\vue-element\demo>npm run dev

1.4 如果网站正常输出，修改config下面的index.js文件

将所有assetsPublicPath对应的‘/’修改为‘./’

1.5 生成dist文件

D:\github\vue-element\demo>npm run build

2、创建java版Hello工程

2.1 基于IDEA和maven，创建基于maven-archetype-webapp的Hello工程

2.2 将之前vue生成的index.html和static目录文件，拷贝到src/main/webapp目录下

2.3 删除index.jsp文件，只留下index.html文件

2.4 配置好tomcat

主要配置两个方面，一个是端口，一个是deployment。确认无误后，点击绿色三角按钮，如果我们可以看到如下的网页内容，那就代表说，配置是成功的。否则，就需要自己花点时间，找找具体失败的原因了，

java web开发（和vue联合开发）相关推荐

vue和php怎么配置,解决Thinkphp与vue联合开发中Thinkphp的配置问题
下面由thinkphp框架教程栏目给大家介绍Thinkphp与vue联合开发中Thinkphp的配置问题,希望对需要的朋友有所帮助! Thinkphp与vue联合开发中Thinkphp的配置问题: 1 ...
java web打包神器_前端开发人员的桌面应用神器 Electron
原标题:前端开发人员的桌面应用神器 Electron 01 为什么用 Java 来开发桌面应用? 曾经的 Java 脆弱.简陋.甚至有被边缘化的危险,不过 Java 在经过了两次飞跃后(以 V8 为首 ...
java web响应式框架_Web开发的十佳HTML5响应式框架
HTML5框架是一类有助于快速轻松创建响应式网站的程序包.这些HTML5框架有着能减轻编程任务和重复代码负担的神奇功能.关于HTML5的框架种类繁多,并且很瘦欢迎,因为它能允许开发人员花费更少的时间和 ...
php数独游戏开发,使用vue如何开发数独游戏
数独是源自18世纪瑞士的一种数学游戏,是一种运用纸.笔进行演算的逻辑游戏.下面这篇文章主要给大家介绍了关于利用vue开发一个所谓的数独的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下. ...
H5横屏开发、vue横屏开发@令狐张豪
有时候正常竖屏开发满足不了我们的需求,需横屏开发开发思路:把这个body利用css3 transform rotate 旋转90度,js判断竖屏情况下的宽高和横屏下的宽高示例: <!DOCT ...
前端开发工具vue.js开发实践总结
最近有很长时间没有更新博客了,换了公司,全部的心思都放在项目上了.通过这次项目的上线,让我感受最深的是前后端分离后,前端页面的模块化管理,以及前端页面的数据邦定.在接触vue.js之前,我之前端要用到 ...
eclipse与DW联合开发java web项目
eclipse与DW联合开发java web项目引言:在开发java web项目时,我们会先用eclipse搭建框架(ssm.ssh-)eclipse主要用在java的开发,但在eclipse上制作 ...
Java Web之BaseServlet的抽取
在Java Web学习的初期,开发的小项目几乎都是JSP+Servlet+JDBC,长期开发下来,会发现当业务逻辑设计的接口一多的时候,充当控制器的Servlet也会越来越多,但是处理的业务逻辑相对单 ...
java+mysql基于ssm的游戏光盘租赁系统（java,web）
项目编号:jjsp283基于ssm的游戏光盘租赁系统(java,web) 运行环境: 开发工具:IDEA /Eclipse 数据库:MYSQL5.7 应用服务:Tomcat7/Tomcat8 使用框架 ...

java web开发（和vue联合开发）

java web开发（和vue联合开发）相关推荐

最新文章

热门文章