前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jsp使用vue+element-ui

jsp使用vue+element-ui

作者头像
崔笑颜
发布2020-06-08 17:18:59
3.7K0
发布2020-06-08 17:18:59
举报

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

两种方式引入

cdn链接方式

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

本地引入

将js文件下载到本地。

代码语言:javascript
复制
<%@ 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-094320@2x

表单

QQ20200608-094334@2x
QQ20200608-094334@2x

优化后

列表

QQ20200608-094234@2x
QQ20200608-094234@2x

表单

QQ20200608-094247@2x
QQ20200608-094247@2x
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-06-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 两种方式引入
    • cdn链接方式
      • 本地引入
      • 优化前
      • 优化后
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档