• 如何在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

  • 相关阅读:
    OC与JS交互之WKWebView
    iOS下JS与OC互相调用(三)--MessageHandler
    html base64 img 图片显示
    Vue中img的src属性绑定与static文件夹
    XML 树结构
    XML 用途
    XML 简介
    JS Window对象
    JS Math对象
    JS 字符串操作
  • 原文地址:https://www.cnblogs.com/masting/p/12071528.html
Copyright © 2020-2023  润新知