学习 VUE 笔记 05 – 组件中使用 sass 和 swiper

cd 到项目根目录
npm install sass-loader node-sass style-loader sass-resources-loader --save-dev

打开组件文件 banner.vue

<style scoped="" lang="scss">
	@function torem($px) {
		@return $px * 1.6 / 100px * 1rem;
	}
	.swiper-container {
		width: 100%;
		height: torem(420px);
		background-color: #f8f8f8;
	}
</style>

torem(420px)是个人习惯，将 px 转成 rem。
为了方便，不用在每一个组件中都写 @function 那个函数，可以将这个函数单独提出来，放到一个 base.scss 文件中，然后需要的地方用 @import "base.scss的路径"; 来引入该文件。例如：

<style scoped="" lang="scss">
	@import "../../../assets/base.scss";
	.swiper-container {
		width: 100%;
		height: torem(420px);
		background-color: #f8f8f8;
	}
</style>

关于 swiper 在 vue 中的使用，引入文件要在 index.html 中进行，相关的 js 也要写在 index.html 中或者另外开个文件，如下

<script>
	$(document).ready(function() {
		var banner = new Swiper('.banner',{
			autoplay: true,
			loop: true,
			observer: true,
			observeParents: true,
		});
	});
</script>

其中observer: true,和observeParents: true,是关键，否则会出现无法滑动的情况。具体看 swiper 官网示例。