通常的 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 的骚操作不建议尝试.
参考资料:
来源: http://www.bubuko.com/infodetail-3340806.html