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

  • 相关阅读:
    Android学习笔记事件处理机制 希
    DIY我的博客皮肤 希
    CSS学习小札居中问题及解决方案 希
    Entity Framework 教程
    springcahce集成redis 设置过期时间 Hiro
    springboot集成springcache Hiro
    Geotools核心特点以及支持数据的格式和标准
    github使用
    一个jekyll使用大牛的博客
    在没有root权限情况下安装python
  • 原文地址:https://www.cnblogs.com/huoyz/p/14848168.html
Copyright © 2020-2023  润新知