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