jsp项目如何引入vue

如题，背景就不介绍了，项目是前后端不分离的，这让我一个转行前端对JSP语法不熟的人来说写起来着实难受。后来加了个考试的新功能，果断引入vue和element，还有polyfill.js，因为要兼容IE9。刚开始写的时候vue和elememt都是引的cdn上的资源，但是我们项目只能使用内网，所以需要将vue和element下载到本地。从线上转到本地的过程中，遇到了一些坑，下面就来说一下。

cdn引用方式

//在head头部引入elementUI样式
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css">
// 在</body>前引入vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>//然后是element，element引入时最好锁定版本号（@xx.xx）,css文件同js文件是相同版本。
<script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>// 最后引入polyfill来支持ie浏览器
<script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script>

这些都引用好后，项目就可以跑起来了，像es6语法、Promise等在IE9都能支持。

下面说一下vue、element等在本地的引用

Vue在本地JSP中的使用

JSP其实就是一个html文件，只不过有特定的语法。引用vue的方式和在html中没什么两样。

// JSP文件的特定格式
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/content/include/taglib.jsp"%>
<html><head><title>JSP中引入vue</title><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><div id="app">// 页面内容</div>// 引入vue<script src="./vue2.6.12/vue.js"></script><script src="引入Jquery"></script><script type="text/javascript">// 在页面加载好后就初始化vue实例,也可以在外面直接初始化$(document).ready(function(){const vm = new Vue({el:'#app',data(){return {msg:''}},methods:{}})})</script></body>
</html>

这样就可以愉快的使用vue了。

element的引入

element下载也很简单，在官网的链接里就能去到cdn上，然后选择版本进行下载。
在这里插入图片描述

我们需要的文件都在lib文件夹内 element-ui/lib/index.js element-ui/lib/theme-chalk/index.css
下载好后将它们引入到项目中，vue.js要放到element JS文件的前面，因为element是基于vue的。引用成功后项目是跑起来了，但是element的图标没有显示出来，通过浏览器查看是没有找到woff字体。
通过查看index.css也能看到引用了字体文件
在这里插入图片描述

在element-ui/lib/theme-chalk文件夹下有个fonts 文件夹，把里面的文件下载下来，然后在index.css同级的文件夹新建一个fonts文件夹，把下载好的两个字体文件放进去就OK了。这时候刷新页面，图标就出来了。
在这里插入图片描述

这里放上我的资源：[vue+element+babel资源下载](链接：https://pan.baidu.com/s/1n3Q4ngjSGZ2g-hgU1uH5CA
提取码：okt7
–来自百度网盘超级会员V6的分享）

百度网盘下载资源慢的可以去我github下载babel下载链接。

兼容IE9，引入browser.js和polyfill.js

以上步骤完成后，项目在chrome、火狐等浏览器中都表现正常。IE就不行了，页面加载不出来。因为IE不支持ES6语法（如果项目中没用es6，页面应该是可以加载出来的，但是ES6很香啊！），这时候就需要babel来将ES6转为ES5。cdn引用方式很简单，一个polyfill.js就够了，因为它会根据不同的浏览器加载不同的JS文件。本地引入要引两个文件才行，其中一个是将ES6转为ES5语法的，另一个是支持像Promise、Generator等ES6的新API的，我是折腾了不少时间才get到。

// JSP文件的特定格式
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/content/include/taglib.jsp"%>
<html><head><title>JSP中引入vue</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><%--引入elementUI样式	--%><link rel="stylesheet" href="${mss}/common/elementUI-2.14.0/css/index.css"></head><body><div id="app">// 容器，页面主要内容</div>// 引入browser 让低版本浏览器解析ES6语法<script src="./babel-polyfill/browser.min.js"></script>// 引入babel-polyfill  让低版本浏览器解析Promise等API<script src="./babel-polyfill/polyfill.min.js"></script>// 引入vue<script src="./vue2.6.12/vue.js"></script>// elementUI JS文件<script src="./elementUI-2.14.0/index.js"></script><script src="引入Jquery"></script><script type="text/babel"> // 注意：这时type不能为text/javascript了，要改为text/babel,解析babel文件// 在页面加载好后就初始化vue实例,也可以在外面直接初始化$(document).ready(function(){const vm = new Vue({el:'#app',data(){return {msg:''}},methods:{}})})</script></body>
</html>

需要注意的有两点：
1、本地引入browser.js和polyfill.js后script标签的type要改为type=text/babel，用cdn方式引入是不需要修改的。
2、js文件的引入顺序，babel–vue–element

---------------------------------------------------更新------------------------------------------------------

以上文件都引入后，在IE9上ES6语法都是支持的，页面都可以加载出来。但是CSS3的一些语法IE9,IE10是不支持的，比如flex布局，rotate，阴影等。我这个项目中使用了element的el-step组件，此组件就使用了flex布局，导致在IE9,IE10下显示不正常。IE10支持部分flex属性，IE11都是支持的。所以我们只要针对IE9，IE10浏览器调整css代码就可以了。我们单独写一份el-step的样式，当浏览器是IE9或IE10时就引入。在IE9、IE10上可以使用float和position来代替flex。

// forIE9.css 兼容IE9 IE10
.el-steps{display: table;width: 84%;
}
.el-steps .el-step{display: table-cell;width: 45%;
}
.el-step__head{float: left;
}
.el-step__main{position: relative;
}
.el-step__arrow{position: absolute;top: 3px;left: 60%;
}/*下拉选样式*/
.el-select__caret{ // select选择器的图标在ie9下显示不正常，IE9不支持transform: rotate(180deg)，前面加-ms前缀以进行元素转换-ms-transform: rotate(180deg);
}

IE9和IE10在引用方式上也不一样，IE9可以用if condition语句，IE10则不支持此语句。
IE10和IE11有一个专门的属性-ms-high-contras。
在这里插入图片描述
IE9、IE10引用方式

<head><title>考试内容表管理</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><%--浏览器为IE9时引入--%><!--[if IE 9]><link rel="stylesheet" href="${mss}/common/mss/css/forIE9.css" /><![endif]--><%--浏览器为IE10、IE11时，利用媒体查询也可以在style内部直接写样式，两种选择一个就行（我是用直接在style里写样式，用link引入的样式有点瑕疵，不知道什么原因）--%><link media="all and (-ms-high-contrast: none), (-ms-high-contrast: active)" rel="stylesheet" href="${mss}/common/mss/css/forIE9.css">// 直接在style内部写兼容样式<style>/* IE10、11不支持if条件的写法IE10/11独有的属性，-ms-high-contrast，有两个值active或none，检测是否启用高对比度浏览器为IE10、IE11时生效*/@media all  and (-ms-high-contrast: none), (-ms-high-contrast: active) {.el-steps{display: table;width: 84%;}.el-steps .el-step{display: table-cell;width: 45%;}.el-step__head{float: left;}.el-step__main{position: relative;}.el-step__arrow{position: absolute;top: 3px;left: 60%;}}</style>
</head>