61,112
社区成员
发帖
与我相关
我的任务
分享springboot 整合thyemeaf 和vue 引入第三方报错 ？
springboot 整合thyemeaf 和vue 引入第三方报错 ？该怎么用，求指教
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>电子简历</title>
<!-- 如果你使用的是 layui 那么无需引入 jQuery 和 layer.js 但需要引入layui.css和layui.js -->
<link href="https://cdn.bootcss.com/layer/3.1.0/theme/default/layer.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/vuejs-2.5.21.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="../js/element-ui/theme-default/index.css">
<!--引入组件库-->
<script src="../js/element-ui/index.js"></script>
<!--<script src="../js/element-ui/slider.js"></script>-->
<!--<script src="../js/element-ui/theme-default/slider.css"></script>-->
<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
<div id="app" class="center-block" style="width:50%;">
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../fixtures/sliders/t1.svg"/></div>
<div class="swiper-slide"><img src="../fixtures/sliders/t2.svg"/></div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<!--<div class="swiper-button-prev"></div>-->
<!--<div class="swiper-button-next"></div>-->
<!-- 如果需要滚动条 -->
<!--<div class="swiper-scrollbar"></div>-->
</div>
</template>
</div>
</body>
<script >
import 'swiper/dist/css/swiper.css'
import Swiper from 'swiper';
export default {
name: "Slider",
mounted(){
new Swiper ('.swiper-container', {
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
})
}
}
</script>
</html>
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>电子简历</title>
<!-- 如果你使用的是 layui 那么无需引入 jQuery 和 layer.js 但需要引入layui.css和layui.js -->
<link href="https://cdn.bootcss.com/layer/3.1.0/theme/default/layer.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/vuejs-2.5.21.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="../js/element-ui/theme-default/index.css">
<!--引入组件库-->
<script src="../js/element-ui/index.js"></script>
<!--<script src="../js/element-ui/slider.js"></script>-->
<!--<script src="../js/element-ui/theme-default/slider.css"></script>-->
<script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
<div id="app" class="center-block" style="width:50%;">
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="../fixtures/sliders/t1.svg"/></div>
<div class="swiper-slide"><img src="../fixtures/sliders/t2.svg"/></div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<!--<div class="swiper-button-prev"></div>-->
<!--<div class="swiper-button-next"></div>-->
<!-- 如果需要滚动条 -->
<!--<div class="swiper-scrollbar"></div>-->
</div>
</template>
</div>
</body>
<script >
import 'swiper/dist/css/swiper.css'
import Swiper from 'swiper';
export default {
name: "Slider",
mounted(){
new Swiper ('.swiper-container', {
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
})
}
}
</script>
</html>
...全文
请发表友善的回复…
发表回复
