npm i xmzs -g
mmp ls
mmp use

可能需要前置学习【TypeScript】小满TypeScript基础教程全集（完结）

TypeScripts配置文件参数讲解：
https://www.bilibili.com/video/BV1wR4y1377K?p=19

B站：小满 《 Vue3 + vite + Ts + pinia + 实战 + 源码 +electron》

23章：css里面也可以使用v-bind绑定setup中定义的变量

<script setup>
import {ref} from 'vue'
const color = ref('red')
</script>
<style>
.a {
 background: v-bind(color)
}
</style>

21章-2：animate.css 动画CSS类库
https://animate.style/

21章-3：gsap动画插件：
https://greensock.com/gsap/

24章：mitt插件可实现事件派发与订阅功能，实现兄弟节点通信

npm install mitt -S

26章：自动import
https://github.com/antfu/unplugin-auto-import

28章：自定义hooks
提到 VUEUSE库，已经做好了很多的功能
https://vueuse.org/

这个代码可以生成一个81的对象数组

Array.apply(null, {length: 81}).map((_,index)=>{return {id: index, number: (index % 9) + 1} })

千锋前端Vue3.0 + Electron快速入门视频教程，基于Vue3.0+Electron 19桌面混合开发项目实战教程
https://www.bilibili.com/video/BV1FP4115739/?p=38&spm_id_from=pageDriver&vd_source=c9b3de14b342c2afe5a988c2a9c40237

用到的一些工具：

• 类似less\sass的CSS高级语言：stylus
• 监听项目文件更改后重启项目命令的工具：nodemon
• VUE3推荐的类似webpack的脚手架工具： vite2
• VUE3推荐的state全局存储库和状态管理插件：pinia
• VUE3推荐的路由插件：vue-router
• electron窗口状态保持（大小、位置）：electron-win-state
• JS实用工具包：lodash
• localStorage/sessionStorage操作插件：store2

vue3状态管理方法：

• 使用内置的 provide、inject 方法，在父组件里定义一个依赖，在子组件里可以引用注入这个依赖，实现状态同步
• 使用pinia状态管理插件

vue3可以在script标签中加个setup属性，就可以直接在script标签里写VUE3代码
所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中

<script setup>
    import { inject } from 'vue'
    import Child from './Child.vue'
    const {isShow} = inject('appState')
</script>
<template>
    <div>
        {{isShow}}
        <Child/>
    </div>
</template>

function urlEncode(param, key, encode) {
    if(param==null) return '';
    var paramStr = [];
    var t = typeof (param);
    if (t == 'string' || t == 'number' || t == 'boolean') {
        paramStr.push((encode==null||encode ? encodeURIComponent(key) : key) + '=' + ((encode==null||encode) ? encodeURIComponent(param) : param));
    } else {
        for (var i in param) {
            var k = key == null ? i : key + (param instanceof Array ? '[' + i + ']' : '.' + i);
            paramStr.push(urlEncode(param[i], k, encode));
        }
    }
    return paramStr.join('&');
}

有时候需要忽略鼠标滚动、点击等事件，直接操作被DIV遮挡的元素，这时候就需要点击穿透了

pointer-events:none;

不过，加上这个样式以后，该元素下的所有元素都不能响应鼠标事件了，那么在里面还需要在正常响应鼠标事件的层上再恢复一下：

pointer-events:auto;