分类 默认分类 下的文章

可能需要前置学习【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('&');
}