分类 默认分类 下的文章
npm换源插件 要以快速的切换npm源地址
npm i xmzs -g
mmp ls
mmp use 收藏比较全方位的VUE3视频学习教程
可能需要前置学习【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 -S26章:自动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快速入门视频教程,基于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> 对象转URL参数
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('&');
}