在jsp页面使用vue
2021/6/4 10:24:02
本文主要是介绍在jsp页面使用vue,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
通常的VUE项目,是前后端分离的项目。那么如何在现有的JSP项目中集成VUE呢?
1.在JSP中引入elementUI
和引入其他UI框架的方式一样
在<script></script>中引入js,在<link/>中引入css
示例:
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/elementUI/element.css" /> <!--注意引入顺序,element依赖于vue,首先引入vue--> <script type="text/javascript" src="${pageContext.request.contextPath}/elementUI/vue.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/elementUI/element.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/elementUI/axios.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/elementUI/qs.js"></script>
对应版本在https://www.bootcdn.cn/中下载(js在bootcdn中下载,类似的jar在maven仓库下载)。
引入后就可以使用elementUI的hmtl标签和VUE的语法了。
2.兼容IE9+
上述五个文件引入后,只是能在Google等支持ES6浏览器中使用。
如果想要JSP中的VUE在IE下生效,需要引入
<script type="text/javascript" src="${pageContext.request.contextPath}/elementUI/es6-promise.auto.min.js"></script>
同时禁用ES6语法:如let,const,箭头表达式等。
如此这般就可以在IE9+及Google等浏览器中访问在JSP中使用的VUE的项目了(因为VUE只支持IE9+)。
3.参考资料
随着前后端分离的普及,JSP逐渐没落,建议VUE项目以前后端分离的方式创建。这种在JSP中使用VUE的骚操作不建议尝试。
参考资料:qd_springboot_vue_elementui_pages20191028
这篇关于在jsp页面使用vue的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-27Vue3项目实战:从零开始的完整指南
- 2024-11-27Vue CLI多环境配置资料详解
- 2024-11-27Vue3+Vite资料:新手入门教程
- 2024-11-27Vue3阿里系UI组件资料入门教程
- 2024-11-27如何集成Ant Design Vue的图标资料
- 2024-11-27如何集成Ant Design Vue图标资料
- 2024-11-27Vue CLI多环境配置资料:新手教程
- 2024-11-27Vue3的阿里系UI组件资料入门指南
- 2024-11-27Vue3公共组件资料详解与实战教程
- 2024-11-27Vue3公共组件资料详解与实战教程