vue中使用js进行rem响应式布局

以下是vue2中使用js进行rem适配

export default {
	mounted() {
		this.$nextTick(() => {
			this.resize()
		})
		window.addEventListener('resize', this.resize)
	},
        beforeDestroy () {
    	window.removeEventListener('resize', this.resize)
        },
	methods: {
		resize() {
			// 基础宽度等于设计稿宽度
			let baseWidth = 1920
			// 此时的浏览器宽度
			let clientWidth = document.documentElement.clientWidth
			// 获取body实例
			let body = document.documentElement
			// 当窗口大小大于768px时,将此时的浏览器宽度分割成1920等等份，实现响应
			if (clientWidth > 768) {
			body.style.fontSize = `${(clientWidth / baseWidth) * 100}px`
			}
		},
	},
}
</script>