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>

jsp项目如何引入vue相关推荐

vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
vue项目安装引入css-loader - cmd篇
vue项目如何引入安装css-loader? 步骤如下: cmd指令: npm install --save-dev css-loader 以上就是关于" vue项目安装引入css-load ...
详解如何在vue项目中引入饿了么elementUI组件
在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库: https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体 ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
VUE 项目中引入外部js文件（CND引入）
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件引入 :<script src="https://cdnjs.cloudflare.com ...
如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法第一种:/static/page.html 第二种:通过iframe嵌入第一种:/static/page.html 在static或public文件夹下,新 ...
.ttf字体文件引入vue项目及使用
出自文章:.ttf字体文件引入vue项目及使用 UED要求使用非系统自带字体 1.在项目的assets文件夹中创建fonts文件夹,将下载好的.ttf字体文件放进去,并创建font.css文件 2.在 ...
【Vue】16.vue项目里引入百度统计
参考官网:百度统计开放平台百度统计最近往项目里面引入百度统计,也是在网上查了各种资料,把百度统计的官网api又好好的看了一下,顺着文档的步骤,一步一步走下来,其实还蛮简单的,首先先在百度统计注册一 ...
创建Vue项目以及引入Iview
创建Vue项目以及引入Iview 官方文档 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue i ...
vue项目中引入bootstrap的方法
vue项目中引入bootstrap?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> 在 vue 项目 ...

jsp项目如何引入vue

jsp项目如何引入vue相关推荐

最新文章

热门文章