在 vite 环境下，安装使用 simple-peer，报错 global is not defined 处理。
解决方法： https://github.com/feross/simple-peer/issues/883
这样引入就可以了：
import SimplePeer from 'simple-peer/simplepeer.min.js'如果遇到 Could not find a declaration file for module 'simple-peer/simplepeer.min.js'. 错误。可以在 env.d.ts 中增加定义就可以。
env.d.ts
declare module 'simple-peer/simplepeer.min.js'vue3 项目，配置了 ts 来开发。如果某一些组件，不使用 ts，编译的时候会报错。有时候并不是不想用 ts，只是那些文件是第三方编写的，又耦合比较高。这个时候，允许这些文件继续使用 js 来编写是一个需求。
这里以一个 LivePlayer 组件为例。
src/components/LivePlayer/LivePlayer.vue。 部分代码如下。这里没有设置 lang='ts',也没有使用 ts 的强类型。components<template>
<div class="relative overflow-hidden shrink-0 w-[320px] h-[405px]">
<div id="remoteVideo" class="w-[720px] h-[405px] ml-[-200px]"></div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const playIng = false
const urls = ref([])
function play(value) {
urls.push(value)
playVideo()
}
function playVideo() {
if (playIng) {
return
}
const url = urls.shift()
if (!url) {
return
}
playIng = true
// todo
}
defineExpose({ play })
</script>tsconfig.app.json 中加入黑名单，ts 编译器对这些文件不做处理。如：{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*", "src/components/LivePlayer/LivePlayer.vue"],
…typings 目录下，增加类型声明。typings 目录根据实际项目配置为准。// 定义一个接口来描述暴露给模板的属性或方法
interface LivePlayerExpose {
speakMessage: (value:string) => void
}
// 声明一个 Vue 组件实例类型，它扩展了 Vue 组件的基础类型，并添加了 LivePlayerExpose 接口
declare type LivePlayerComponent = InstanceType<DefineComponent<{}, {}, {}, {}>> & LivePlayerExpose
declare module '@/components/LivePlayer/LivePlayer.vue' {
import { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, {}, {}> & {
// 注意：这里我们并不直接导出 component，而是声明了它的类型
// 在实际使用时，Vue 会处理 component 的导出和注册
};
// 导出的是组件的实例类型，以便在模板或其他组件中引用时具有正确的类型
export default component
// 导出组件实例类型以供外部使用
export type Instance = LivePlayerComponent
}components<template>
<div class="w-full">
<LivePlayer ref="livePlayerRef" />
</div>
</template>
<script setup lang='ts'>
import { ref, onMounted } from 'vue';
const livePlayerRef = ref<InstanceType<typeof LivePlayer> | null>(null)
onMounted(() => {
livePlayerRef.value?.play("xxx")
})
</script>vite 支持自动处理 scss，less 等文件，但需要下载对应的包 https://cn.vitejs.dev/guide/features#css-pre-processors。 如果，你想单独写 scss 这些，可以在 vite.confit.ts 中进行配置
# 创建 vue 项目
pnpm add vue
pnpm format
pnpm dev
# 添加 git 版本控制
git init -b main
git add .pnpm add sasstouch ./src/assets/css/base.scss
# 填充下边内容
body {
background-color: #f00;
}import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'
// https://vitejs.dev/config/
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/assets/css/base.scss";`
}
}
},
plugins: [vue(), VueDevTools()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})这个时候，发现 base.scss 中的样式不生效。真的很郁闷，查了一些文档和资料，就是这么写的，偏偏不行。还好在 segmentfault 上找到了一个解释。就是你必须至少在 .vue 文件里边至少使用 <style lang="scss"><style>。于是，手动这样加了一下，果真样式生效了。 当下用的是最新版本的 vite（vite5），依然存在这个问题。
https://echarts.apache.org/examples/zh/index.html#chart-type-line
https://echarts.apache.org/zh/option.html#title
pnpm add echarts vue-echarts用了 ts 的 vue3 项目，会经常遇到类型问题。组件问题也是类型问题的一种。这里简单总结一下写法。
无论是第三方库，还是自定义组件，都可以通过这种方式来搞定。
这里分别以 element plus 中的组件和自定义组件为例。
# element plus 的 ElTable 组件
<template>
<el-table ref = "userTableRef">
<el-table-column property="nickname" label="昵称" />
</el-table>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { ElTable } from "element-plus";
const userTableRef = ref<InstanceType<typeof ElTable>>()
</script>下边是自定义组件。
<template>
<MediaPlayer ref="mediaPlayer" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import MediaPlayer from '@/components/MediaPlayer/MediaPlayer.vue'
const mediaPlayer = ref<InstanceType<typeof MediaPlayer>>()
</script>定义好了类型后，代码提示就很友好了。
很久很久以前，第三方授权登录就开始流行。比如 qq、微博、github、微信这些。如果有一个大的平台来做这个服务的确是很方便的一个事情。在这些授权后都会有一个回调页面，就是从自己的网页跳转到授权页面，再跳转回来。但是，小程序是没提供这个服务的。但是自己可以构造类似的方式。
整个环节，代码都是由自己控制，可以很灵活的视线需求。仅仅是生成小程序码和扫码登录上小程序是腾讯那边做的。
示例：https://www.zeipan.com/admin
关键点：这里以 jwt 的认证方式来实现授权登录。
前端项目，打包后，运行起来就可能会出现一些提示。描述语是 Violation 。看着不舒服，还是要解决的。列举一下
出现报错的原因：
Chrome51 版本以后，Chrome 增加了新的事件捕获机制－Passive Event Listeners；
Passive Event Listeners：被动事件侦听器是 DOM 规范中的一项新功能，它使开发人员能够通过消除滚动来阻止触摸和滚轮事件侦听器来选择加入以获得更好的滚动性能。
开发人员可以使用 {passive: true} 来设置监听器后内部不会调用 preventDefault() 来阻止默认滑动行为，Chrome 浏览器称这类型的监听器为被动（passive）监听器。
Passive Event Listeners 就是告诉前页面内的事件监听器内部是否会调用 preventDefault 函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。
目前Chrome主要利用该特性来优化页面的滑动性能，所以Passive Event Listeners特性当前仅支持mousewheel/touch相关事件。
参考这篇课解决 https://juejin.cn/post/7230806990452588581
很多很多年前，网页端图片裁切都会想到 cropper.js 。到了当前， cropper.js 还是值得一选。这个是基于 js，ts 的插件，不局限你使用 vue 还是 使用 react 或其他的。反正，还是很好用。当下 2.0 版本更好用。
官网： https://fengyuanchen.github.io/cropperjs/v2/zh/
演练场：https://fengyuanchen.github.io/cropperjs/v2/zh/playground.html
这个插件越来越自由，也越来越集中。它只关注输入（img dom）和输出（canvas）[转换成 base64 可能会存在跨域问题]。大只分以下几个模块（每个模块都可以单独使用）。
Cropper
CropperCanvas
CropperImage
CropperSelection
CropperShade
CropperGrid
CropperViewer
# 等等这些，都各自有各自的渲染职责。加上就有，配置就改变。不加则没有。想加就加，想减就减。是真的好用。 先看一个我做的一个 demo。是基于vue3 + ts 实现的。（不对。里边还加了一些 element-plus 的组件）
构建的时候，也很方便。使用其接口就可以。更好的是是基于组件的方式来处理。最终的目的是什么，是要渲染到 dom 中，让人看到。 组件不就是最直接的方式吗。这个时候，你可以很方便的使用 css 去美化你的产品。只需要少量关注一些配置就好。比如裁切比例，覆盖比列等。
有封装好的 useDark useToggle 这些插件，做项目就很方便。可是用的时候，会遇到一些问题。其实到最后，不是问题了。比如改变主题的时候，transition 失效了。因为没 transition，强行改变背景颜色等就会很生硬。transition 失效是因为 userColorMode 在处理改变的时候，先禁用 transition 再取消禁用导致的。在创建 useDark 的时候，options 的 disableTransition 可以控制该行为，只是不传值的时候，默认就是 true，就是禁用 trasition。那么默认传入 disableTransition 为 false 的值就可以搞定了。
https://github.com/vueuse/vueuse/blob/main/packages/core/useColorMode/index.ts#L122
const isDark = useDark({disableTransition: false})
const toggleDark = useToggle(isDark)只需上边这样实现即可。