springboot+vue+element不前后端分离引入资源

在前面基础上增加vue与element资源。

在static文件夹下创建plugins文件夹将资源放入

在html头引入资源文件

<!-- 引入vue -->
<script src="../../plugins/vue.min.js"></script>
<!-- 引入jquery -->
<script src="../../plugins/jquery.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet"
	href="../../plugins/element-ui/theme-default/index.css">
<!--引入组件库-->
<script src="../../plugins/element-ui/index.js"></script>

进行测试即可

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<!-- 引入vue -->
<script src="../../plugins/vue.min.js"></script>
<!-- 引入jquery -->
<script src="../../plugins/jquery.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet"
	href="../../plugins/element-ui/theme-default/index.css">
<!--引入组件库-->
<script src="../../plugins/element-ui/index.js"></script>
<title>Insert title here</title>
</head>
<body>
<div id="rrapp">
<div v-show="showlist">aaaa<button @click="add">隐藏</button><el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

<el-row>
  <el-button plain>朴素按钮</el-button>
  <el-button type="primary" plain>主要按钮</el-button>
  <el-button type="success" plain>成功按钮</el-button>
  <el-button type="info" plain>信息按钮</el-button>
  <el-button type="warning" plain>警告按钮</el-button>
  <el-button type="danger" plain>危险按钮</el-button>
</el-row>

<el-row>
  <el-button round>圆角按钮</el-button>
  <el-button type="primary" round>主要按钮</el-button>
  <el-button type="success" round>成功按钮</el-button>
  <el-button type="info" round>信息按钮</el-button>
  <el-button type="warning" round>警告按钮</el-button>
  <el-button type="danger" round>危险按钮</el-button>
</el-row>

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row></div>
</div>
<button type="button"onclick="text()">查询</button>
<button type="button"onclick="update()"class="admin">修改</button>
<button type="button"onclick="del()"class="admin">删除</button>
</body>
<style>
.admin{
display: none
}
</style>
<script type="text/javascript">
//测试vue
$(function(){
	console.log("asd")
	$.ajax({
		type: "POST",
		url: "/user/list",
		contentType: "application/json",
		success: function(r){
			console.log(r)
            for(var i=0;i<r.length;i++){ 
            	console.log(r[i])
			 if(r[i]=="admin"){  
				 console.log("admin用户")
                 $(".admin").css("display","block");  
             }  
            }
		}
	});
})
var vm = new Vue({
	el : '#rrapp',
	data : {
		showlist : true,
	},

	methods : {
		add:function(){
			alert("asd")
			vm.showlist = false;
		}
	
	}
});
</script>
</html>

element 组件官方网址http://element.eleme.io/#/zh-CN

随便复制几个按钮测试样式即可。

资源文件包地址：vue+element资源文件

springboot+vue+element不前后端分离引入资源

猜你喜欢