在publick下面分别建立两个文件 一个是默认的一个是夜间的
然后在app。vue入口文件
mounted(){let colorName = localStorage.getItem('themes') || 'default'let link = document.createElement('link')link.type = 'text/css'link.rel='stylesheet'link.href = `/themes/${colorName}.css`document.querySelector('head').appendChild(link)},
然后通过切换一键换肤
<template><div><router-link to="/about">关于</router-link><router-link to="/">首页</router-link><button @click="changecolor('dark')">一键换肤</button><router-view></router-view></div></template><script>export default {data(){return {obj:{url:'http',time:''}}},mounted(){let colorName = localStorage.getItem('themes') || 'default'let link = document.createElement('link')link.type = 'text/css'link.rel='stylesheet'link.href = `/themes/${colorName}.css`document.querySelector('head').appendChild(link)},methods:{changecolor(colorName){localStorage.setItem('themes',colorName)let link = document.createElement('link')link.type = 'text/css'link.rel='stylesheet'link.href = `/themes/${colorName}.css`document.querySelector('head').appendChild(link)}}}</script><style lang="less" scoped></style>
创建css的过程可以封装一个函数 具体根据自己的情况进行优化
