elementplus自动按需引入
elementplus主题色定制
安装sass
npm install sass -D
要替换的主题色内容：
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': (// 主色'base': #27ba9b,),'success': (// 成功色'base': #1dc779,),'warning': (// 警告色'base': #ffb302,),'danger': (// 危险色'base': #e26237,),'error': (// 错误色'base': #cf4444,),)
);vite配置：
-
告知elementplus引入的文件是 sass文件
-
自动导入这个sass文件
import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// elementplus 按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'// https://vitejs.dev/config/
export default defineConfig({// plugins是vite的插件配置位置plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({// 将elementplus配置采用sass格式resolvers: [ElementPlusResolver({importStyle:"sass"})],}),],resolve: {alias: {// 实际的路径转换'@': fileURLToPath(new URL('./src', import.meta.url))}},css:{preprocessorOptions:{scss:{additionalData:// 自动导入 定制好的scss`@use "@/styles/element/index.scss" as *;`}}}
})重置样式
// 重置样式
* {box-sizing: border-box;
}html {height: 100%;font-size: 14px;
}
body {height: 100%;color: #333;min-width: 1240px;font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI','Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei',sans-serif;
}
body,
ul,
h1,
h3,
h4,
p,
dl,
dd {padding: 0;margin: 0;
}
a {text-decoration: none;color: #333;outline: none;
}
i {font-style: normal;
}
input[type='text'],
input[type='search'],
input[type='password'],
input[type='checkbox'] {padding: 0;outline: none;border: none;-webkit-appearance: none;&::placeholder {color: #ccc;}
}
img {max-width: 100%;max-height: 100%;vertical-align: middle;background: #ebebeb url('@/assets/images/200.png') no-repeat center / contain;
}
ul {list-style: none;
}#app {background: #f5f5f5;user-select: none;
}.container {width: 1240px;margin: 0 auto;position: relative;
}
.ellipsis {white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}.ellipsis-2 {word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;
}.fl {float: left;
}.fr {float: right;
}.clearfix:after {content: '.';display: block;visibility: hidden;height: 0;line-height: 0;clear: both;
}// reset element
.el-breadcrumb__inner.is-link {font-weight: 400 !important;
}sass文件自动导入公共变量，避免手动导入
sass文件可能会存一些共享颜色，等
$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;
字体图标引入
监听滚动距离，显示吸顶
定义好一个写好的nav，，，作为吸顶nav，，，当滚动条滚动到一定位置，，显示这个吸顶nav，，并一直吸顶，，当滚动条小于某个高度，，隐藏这个吸顶nav
const y = ref(0)
const handleScroll = ()=>{console.log(window.scrollY)y.value = window.scrollY
}
onMounted(()=>{window.addEventListener("scroll",handleScroll)
})
pinia共享导航数据
axios
axios-http.com
props 和 slot 写模板
自定义指令实现懒加载图片
app.direactive("lazy-img",(el,binding)=>{// el :绑定这个指令的 dom// binding : 这个指令绑定的值
})
懒加载图片，就是等图片进入可视区域之后再去加载图片，，
预先不设置src属性，，等图片进入可视区域之后，在设置src属性，去请求图片。。
js中可以使用Intersection Observer API 监测元素是否在视口区域，，，
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<style>.content {height: 1500px;background-color: lightgrey;width: 1000px;}.target {margin: 1000px 0;padding: 20px;background-color: lightcoral;text-align: center;}.in-view {background-color: lightgreen;}
</style>
<div class="content"><div id="target" class="target">监测的目标元素</div>
</div>
<script>const observer= new IntersectionObserver((entries)=>{entries.forEach(entry=>{if (entry.isIntersecting){console.log("进入")}else{console.log("leave")}})})var element = document.querySelector("#target");observer.observe(element)
</script>
</body>
</html>定义指令的时候，监测视口：
// 定义全局指令
app.directive("img-lazy",{mounted(el,binding){// el :指令绑定的那个元素// binding ： 指令的等于号后面 的表达式值console.log(el,binding.value)const observer = new IntersectionObserver((entries)=>{for (const entry of entries) {if (entry.isIntersecting){// 进入了console.log("进入了")el.src = binding.value}}})observer.observe(el)}
})
图片加载完成后，存在重复监听，需要将监听移除掉
observer.unobserve(entry.target)
vue3插件
js代码不应该直接写在入口函数中，，可以使用插件形式，去执行这些js代码，，
定义一个插件:
export const lazyPlugin = {install(app){app.directive("img-lazy",(el,binding)=>{console.log(el,binding.value)const observer = new IntersectionObserver((entries)=>{for (const entry of entries) {if (entry.isIntersecting){// 进去了console.log("enter")el.src = binding.value// 监听完一次后，取消监听，，图片只需要加载一次observer.unobserve(entry.target)}}})observer.observe(el)})}
}在main.js中导入插件：
import {lazyPlugin} from "@/directives/index.js";
app.use(lazyPlugin)
vue3使用路由参数
import {useRoute} from "vue-router"
const route = useRoute()console.log(route.params.id)
router-link激活时设置样式名
<RouterLink :to="`/category/${item.id}`" active-class="active">{{item.name}}</RouterLink> </li>路由缓存问题
一个路由跳转到另一个路由的时候，如果是相同的组件会被复用，，，
解决：
- 不让组件复用，强制销毁重建,在路由出口添加一个key，破坏复用机制
<!-- 二级路由出口--><RouterView :key="$route.fullPath"/>
销毁重建会导致所有的请求都重新发送，，如果是复用的数据，就会存在资源浪费
2. 监听路由变化
onBeforeRouteUpdate((to,from)=>{}),router里面的钩子函数，，监测路由变化，，to是到哪个页面
import {onBeforeRouteUpdate} from "vue-router";
// 路由变化onBeforeRouteUpdate((to, from, next)=>{console.log("路由变化了",to)getCategory(to.params.id)
})
业务代码拆分
![[论文笔记]Are Large Language Models All You Need for Task-Oriented Dialogue?](https://img-blog.csdnimg.cn/img_convert/a9a583c33a94ba4467be7e9b1b88712b.png)
