• 如何在JSP中使用VUE/elementUI


    通常的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

  • 相关阅读:
    引用 struts2标签详解
    Java 中日期的计算
    在一个FORM中实现多个ACTION动作
    java.lang.OutOfMemoryError: PermGen space最好的解决方法
    Java实现和栈的应用举例
    Java的自动装箱和拆箱
    oracle11g更改字符集AL32UTF8为ZHS16GBK
    设计的臭味
    OOD设计五个原则
    推荐JQuery学习简介
  • 原文地址:https://www.cnblogs.com/masting/p/12071528.html
Copyright © 2020-2023  润新知