zoukankan      html  css  js  c++  java
  • 如何在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

  • 相关阅读:
    文字
    <script type="text/x-template"> 模板
    防xss攻击
    url
    symmfony
    composer
    header 和http状态码
    bootstrap
    linux的设置ip连接crt,修改主机名,映射,建文件
    Centos上传下载小工具lrzsz
  • 原文地址:https://www.cnblogs.com/masting/p/12071528.html
Copyright © 2011-2022 走看看