jsp使用vue+element-ui

jsp使用vue+element-ui

因需要做界面美化,所以需要使用element-ui,原生jsp能实现的效果,实在是太少了。

两种方式引入

cdn链接方式

直接使用官方提供的链接地址。

本地引入

将js文件下载到本地。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/context/mytags.jsp" %>
<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <%--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">--%>
    <link rel="stylesheet" href="plug-in/element-ui/element-ui.css">
    <link rel="stylesheet" href="plug-in/element-ui/modiPublic.css">

    <style>

    </style>
</head>

<body style="background-color: #FFFFFF;">

</body>

<!-- import Vue before Element -->
<%--<script src="https://unpkg.com/vue/dist/vue.js"></script>--%>
<script type="text/javascript" src="plug-in/element-ui/vue.js"></script>
<script type="text/javascript" src="plug-in/element-ui/vue-resource.js"></script>
<!-- import JavaScript -->
<%--<script src="https://unpkg.com/element-ui/lib/index.js"></script>--%>
<script type="text/javascript" src="plug-in/element-ui/element-ui.js"></script>
<script>
</script>

优化前

列表
QQ20200608-094320@2x
表单
QQ20200608-094334@2x

优化后

列表
QQ20200608-094234@2x
表单
QQ20200608-094247@2x