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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM