Vue3 + vite + Ts + pinia + 实战 + 源码

https://www.bilibili.com/video/BV1dS4y1y7vd?from=search&seid=230935554877610115&spm_id_from=333.337.0.0

Vue3 + vite + Ts + pinia + 实战 + 源码

通过本课程你可以学到vue3最新语法setup语法糖，和最新的vite构建工具，和vue3的源码解读，实战项目我们会做PC项目，H5项目，小程序项目，nodejs编写接口，Mysql，redis存储库。electron 桌面程序。服务器部署 nginx linux 知识和云计算，时间充裕的话我会加上单机片硬件和我们的系统对接，最后进行渗透测试我们的项目

P1 小满Vue3（课程导读）

P2 小满Vue3（第一章Vue概述）
P3 小满Vue3（第二章环境搭建）

setup 塞暗

vite vite工具

typescript 太s亏

pinia 皮呢a

我将会学到什么
Vue3最新Setup语法糖
Vite构建工具
TypeScript
Pinia状态管理

Linux Nginx
云计算K8S docker等
Nodejs
NestJs

实战项目PcH5]小程序
桌面程序Electron
单片机
测试渗透

安装最新版
npm init vite@latest
npm install @vue/cli -g
重新npm

P4小满Vue3（第三章认识目录和SFC

assets编译过 public不编译

P5 小满Vue3（第四章模板语法&vue指令

一:
<script  lang="ts">
import {defineComponent} from 'vue'
  export default defineComponent({
    data(){
      return {
        msg:'hello'
      }
    }
  })
</script>
二:
<script lang="ts">
  export default{
    data(){
      return {
        msg:'hello'
      }
    }
  }
</script>
三:
<script setup lang="ts">
  let msg:string='hello'
  let change=()=>{} //@click="change"
</script>

<script setup lang="ts">
  type Style={
    color:string,
    height:string
  }
  const style:Style={
    color:'blue',
    height:'88px'
  }
</script>

typescript中type和interface区别
在ts中，定义类型由两种方式：接口（interface）和类型别名（type alias）
interface只能定义对象类型，type声明的方式可以定义组合类型，交叉类型和原始类型
如果用type alias 声明的方式，会导致一些功能的缺失
1.interface方式可以实现接口的extends/implements，而type 不行
2.interface可以实现接口的merge，但是type不行

<script setup lang="ts">
  const arr:number[]=[1,2,3]
  const arr1:Array<number>=[3,4,5]
</script>

响应式
<template>
  <input type="text" v-model="msg">
  {{msg}}
</template>
<script setup lang="ts">
  import {ref} from 'vue'
  let msg=ref('hello')
</script>

P6 小满Vue3（第五章虚拟DOM和VueKeyDiff算法

http://boardmix.cn/app/editor/uauSTYYRpVufBOLBuoXnhg

P7 小满Vue3（第六章Ref全家桶）

http://blog.csdn.net/qq1195566313/article/details/122780637

<script setup lang="ts">
  import {ref,Ref} from 'vue'
  // let msg=ref<string>('hello')
  let msg:Ref<string>=ref('hello')
  改 msg.value=hello	
</script>

isRef shallowRef(对象) triggerRef(强制更新) 
customRef(自定义ref)

<script setup lang="ts">
  import {customRef} from 'vue'
  function MyRef<T>(value:T){
    return customRef((trank,trigger)=>{
      return {
        get(){
          trank()
          return value
        },
        set(newVal:T){
          value=newVal
          trigger()
        }
      }
    })
  }
  let msg=MyRef<string>('hello')
</script>

P8小满Vue3（第七章Reactive全家桶

reactive 接受数组 对象 复杂数据类型
其他类型警告
赋值影响响应式
import {reactive,readonly} from 'vue'
readonly只读 
shallowReactive 深改不显示dom上

P9 小满Vue3（第八章toRef，toRefs,toRaw

toRef原来是什么就是什么 
toRefs是响应式 解构
import {toRefs} from 'vue'
...toRefs(obj)
const raw=toRaw(obj) 变成原对象

P10 小满Vue3（第九章computed计算属性-购物车案例

1
import {computed} from 'vue'
const name=computed(()=>{
    return xx
})
2
const name=computed({
    get(){},
    set(){}
})

P11 小满Vue3（第十章watch侦听器）

import {ref,watch} from 'vue'
let msg=ref('')
watch(msg,(new,old)=>{},{deep:true,immediate:true}) ref
如果是reactive不写deep也可以

P12 小满Vue3（第十一章watchEffect高级侦听器

let msg=ref('x')
let stop=watchEffect((oninvalidate)=>{
    console.log(msg.value) //有写才watch
    oninvalidate(()=>{
        //先执行
        做防抖节流等
    })
},{
    flush:'post',//副作用刷新时机flush一般使用post
    onTrigger(e){
        调试
        debugger
    }
})
stop()停止
=默认一开始就运行一次 等价immediate:true

P13 小满Vue3（第十二章认识组件和生命周期

在setup里面
直接导入组件就用就行了
<template>
  <hello></hello>
</template>
<script setup lang="ts">
import hello from './components/HelloWorld.vue';
</script>

setup生命周期
onBeforeMount onMounted onBeforeUpdate onUpdated onBeforeUnmount onUnmounted
setup先
onBeforeMount(()=>{})

P14 小满Vue3（第十三章实操组件认识less&scoped

npm install less less-loader -D 
css reset http://meyerweb.com/eric/tools/css/reset/
less{
    .a{
       &-xx{} == .a-xx{} 
    }
}

P15 小满Vue3（第十四章父子组件传参

父 传 子
  <hello title="父传子值"></hello>
子
<template>
    <div>
        {{title}}
    </div>
</template>
<script setup lang="ts">
defineProps(['title'])
</script>
2.
<script setup lang="ts">
defineProps({
    title:{
        type:String
    }
})
</script>
3.
<script setup lang="ts">
type Props={
    title:string
}
defineProps<Props>()
</script>

子 传 父 通过事件
子
<button @click="cc">change</button>
let emit=defineEmits(['change'])
const cc=()=>{
    emit('change','子传父')
}
父
<hello @change="pc"></hello>
const pc=(value:string)=>{
  title.value=value
}

组件ref实例
defineExpose({})
父
<hello ref="child"></hello>
import {ref} from 'vue'
let child=ref(null)
console.log(child.value.msg)
子
import {ref} from 'vue'
let msg=ref<string>('hello')
defineExpose({
    msg
})

可选择传参数 默认值
父
<hello :title="title"></hello>
子
{{title}}---{{data}}
type Props={
    title?:string, //带?可选择
    data?:number[]
}
withDefaults(defineProps<Props>(),{
    title:'default',
    data:()=>[3,4,5]
})

P16 小满Vue3（第十五章全局组件局部组件递归组件

ref 在标签上获得dom el

createApp(App).component('card',card)
多个标签script
不带setup使用 加name
?   ?? 问号语法

P17 小满Vue3（第十六章动态组件）

ts component 难点

P18 小满Vue3（第十六章-2动态组件补充知识

http://blog.csdn.net/qq1195566313/article/details/122891279?spm=1001.2014.3001.5501

markRaw 跳过proxy代理

<template>
  <button @click="change">change</button>
  <component :is="vv.current?vv.current:A"></component>
</template>

<script setup lang="ts">
import { markRaw, reactive, ref } from "@vue/reactivity"
import A from './components/A.vue'
import B from './components/B.vue'
let flag=ref(true)
let vv=reactive({
  current:''
})
const change=()=>{
  flag.value=!flag.value
  vv.current=flag.value?markRaw(A):markRaw(B)
}
</script>

P19 小满Vue3（第十七章插槽全家桶

http://blog.csdn.net/qq1195566313/article/details/122904105?spm=1001.2014.3001.5501

#default=""
动态插槽
插槽可以是一个变量名

        <Dialog>
            <template #[name]>
                <div>
                    23
                </div>
            </template>
        </Dialog>
const name = ref('header')
————————————————
版权声明：本文为CSDN博主「小满zs」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq1195566313/article/details/122904105

P20 小满Vue3（第十八章异步组件&代码分包&suspense

http://blog.csdn.net/qq1195566313/article/details/122909360

在 script setup 里面 可以不用写async 直接await  
let data=await axios()
ajax
<Suspense>标签插槽 异步组件 延迟

<template>
  <div>
    <Suspense>
      <template #default>
        <A></A>
      </template>
      <template #fallback>
        <div>
          loading....
        </div>
      </template>
    </Suspense>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from "vue";
const A=defineAsyncComponent(()=>import('./components/A.vue'))
</script>

P21 小满Vue3（第十九章Teleport传送组件

http://blog.csdn.net/qq1195566313/article/details/122916261

    <teleport to='html'>
        <div>
          相当absolute
        </div>
    </teleport>
插入在那个位置
to那可以是类 id .xx #id

P22 小满Vue3（第二十章keep-alive缓存组件

http://blog.csdn.net/qq1195566313/article/details/122953072

初次进入时： onMounted> onActivated
退出后触发 deactivated
再次进入：
只会触发 onActivated
事件挂载的方法等，只执行一次的放在 onMounted中；组件每次进去执行的方法放在 onActivated中

P23 小满Vue3（第二十一章transition组件基础用法

http://blog.csdn.net/qq1195566313/article/details/123000653

P24 小满Vue3（第二十一章-2transition结合animate.css

https://animate.style/

自定义transtion标签的class配合第三方库使用

npm install animate.css -S

3直接类就行 4要加前缀

2.自定义过渡 class 类名
trasnsition props
enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class

P25 小满Vue3（第二十一章-3transition生命周期和GSAP

http://greensock.com/docs/v3/GSAP/Tween css动画js库

npm install gsap -S

<template>
  <div>
    <button @click="flag=!flag">switch</button>
    <br>
    <transition 
      @before-enter="EnterFrom"
      @enter="EnterActive"
      @leave="Leave"
    >
      <div v-if="flag" class="box"></div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from "@vue/reactivity";
import gsap from 'gsap'
let flag=ref(true)
const EnterFrom=(el:Element)=>{
  gsap.set(el,{
    width:0,
    height:0
  })
}
const EnterActive=(el:Element,done:gsap.Callback)=>{
  gsap.to(el,{
    width:200,
    height:200,
    onComplete:done
  })
}
const Leave=(el:Element,done:gsap.Callback)=>{
  gsap.to(el,{
    width:0,
    height:0,
    onComplete:done
  })
}
</script>

<style lang="less" scoped>
.box{
  width: 100px;
  height: 100px;
  background: red;
}
</style>

P26 小满Vue3（第二十一章-4transition-Appear属性

通过这个属性可以设置初始节点过度

就是页面加载完成就开始动画对应三个状态

appear-active-class=""
appear-from-class=""
appear-to-class=""
appear

P27 小满Vue3（第二十二章transitionGroup

http://blog.csdn.net/qq1195566313/article/details/123058884

P28 小满Vue3（第二十二章-2平面过度动画酷炫数组打乱

http://acrotwist.com/blog/the-hack-is-back/

The Hack is Back!

Array.apply(null,{length:81} 值是undefined
new Array(81) 就length是81    
http://lodashjs.com
npm install lodash -S
数组打乱 lodash.api

lodash报错需要安装ts声明文件库
npm install @types/lodash -D

<template>
  <div>
    <button @click="random">random</button>
    <transition-group move-class="mmm" class="wraps" tag="div">
      <div class="items" v-for="item in list" :key="item.id">{{item.number}}</div>
    </transition-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from "@vue/reactivity";
import _ from 'lodash'
let list=ref(Array.apply(null,{length:81} as number[]).map((_,index)=>{
  return {
    id:index,
    number:(index%9)+1
  }
}))
const random=()=>{
  list.value=_.shuffle(list.value) //shuffle随机打乱
}
</script>

<style lang="less" scoped>
.wraps{
  display:flex;
  flex-wrap: wrap;
  width: calc(25px * 10 + 9px);
  .items{
    width:25px;
    height:25px;
    border:1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.mmm{
  transition:all 1s;
}
</style>

P29 小满Vue3（第二十二章-3状态过度

<template>
  <div>
    <input v-model="num.current" type="number" step="20">
    <div>{{num.guodu.toFixed(0)}}</div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "@vue/reactivity";
import { watch } from "@vue/runtime-core";
import gsap from 'gsap'
let num=reactive({
  current:0,
  guodu:0
})
watch(()=>num.current,(newVal)=>{
  gsap.to(num,{
    duration:1,
    guodu:newVal
  })
})
</script>

<style lang="less" scoped>
</style>

P30 小满Vue3（第二十三章依赖注入provide/inject

http://blog.csdn.net/qq1195566313/article/details/123143981

父
import {provide} from 'vue'
provide('key',value)
子
import {inject} from 'vue'
let data=inject('key')

P31 小满Vue3（第二十四章兄弟组件传参&Bus

http://blog.csdn.net/qq1195566313/article/details/123158620

P32 小满Vue3（第二十五章TSX）

http://blog.csdn.net/qq1195566313/article/details/123172735

P33 小满Vue3（彩蛋）

http://blog.csdn.net/qq1195566313/article/details/123187523

http://github.com/antfu/unplugin-auto-import

P34 小满Vue3（第二十六章组件v-model

https://blog.csdn.net/qq1195566313/article/details/123187523

P35 小满Vue3（第二十七章-自定义指令

http://blog.csdn.net/qq1195566313/article/details/123228132

P36 小满Vue3（第二十七章自定义指令-2函数简写

P37 小满Vue3（第二十七章自定义指令案例

P38 小满Vue3（第二十八章自定义Hooks

http://blog.csdn.net/qq1195566313/article/details/123271189

Vue3 的自定义的hook
Vue3 的 hook函数 相当于 vue2 的 mixin, 不同在与 hooks 是函数
Vue3 的 hook函数 可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数
https://vueuse.org/guide/

P39 小满Vue3（第二十九章全局函数和变量

https://blog.csdn.net/qq1195566313/article/details/123292042

app.config.globalProperties

P40 小满Vue3（第三十章自定义Vue插件

https://blog.csdn.net/qq1195566313/article/details/123300264

安装pinia

https://www.cnblogs.com/chengqiang521/p/15890923.html

https://jishuin.proginn.com/p/763bfbd71cbf

npm install pinia

import { createPinia,PiniaVuePlugin } from 'pinia'

import { defineStore } from 'pinia'

P69

重定向可以字符串函数 path query

P70 小满Router（第八章-导航守卫-全局前置守卫

router.beforeEach to.path localstorage

P71 后置守卫

router.afterEach((to,from)={})

window.requestAnimationFrame系统时间

vue组件转虚拟dom createVNode

虚拟dom转真正dom render

afterEach 做loadding加载效果

P72 路由元信息

document.title meta

P73

P75

router redirect 三种写法字符串函数对象可以传参

P76

路由守卫中间件导航守卫前置后置

requestAnimationFrame

后置守卫 loading效果

P79 路由过渡动效果

https://blog.csdn.net/qq1195566313/article/details/123767240

    <router-view #default="{route,Component}">
        <transition  :enter-active-class="`animate__animated ${route.meta.transition}`">
            <component :is="Component"></component>
        </transition>
    </router-view>

P82 滚动行为

router scrollBehavior 路由滚动行为

PM2

https://blog.csdn.net/qq1195566313/article/details/123564779

ssh

Linux

https://blog.csdn.net/qq1195566313/article/details/123934127

Nginx

blog.csdn.net/qq1195566313/article/details/123958967

正向代理(VPN类)

反向代理客户端-->niginx->(server1/server2)

P92 小满服务端Linux（第九章安装Nginx）

linuxxkxwinx

Nginx配置 https://blog.csdn.net/qq1195566313/article/details/124217010

https://blog.csdn.net/qq1195566313/article/details/124486764 反向代理解决跨域

id='a' a.onclick 可以直接

nginx.exe -s stop 停止服务直接就开启

https://blog.csdn.net/qq1195566313/article/details/124513548 vue单页面切换找不到应用重新定回首页

文章124546293

goaccess nignx日志分析有html 图形界面等

PostMan 自动压力测试发生次数

负载均衡

网络安全（canvas指纹追踪技术）

https://www.bilibili.com/read/cv16329382?spm_id_from=333.999.0.0.com%2F

网络安全（CSS 键盘记录器-React）

https://www.bilibili.com/read/cv16346229?spm_id_from=333.999.0.0.com%2F

网络安全（照片信息EXIF）

https://www.bilibili.com/read/cv16730810?spm_id_from=333.999.0.0

网络安全（蜜罐技术）

https://www.bilibili.com/read/cv16944860?spm_id_from=333.999.0.0

微信号手机号本地存有

网络安全（自动化UI测试）

Puppeteer 自动化脚本截屏

P104 网络安全（输入法）===P106

Vant3虚拟键盘

P107 小满网络安全（第七章网络模型）

https://blog.csdn.net/qq1195566313/article/details/125568128

用到技术

http://blog.csdn.riet/qq1195566313/article/details/122768533
nvm https://www.cnblogs.com/wangxiaomo/p/11591866.html 删除node nvm重新安装
安装最新版
npm init vite@latest
npm install @vue/cli -g
重新npm包
npm install less less-loader -D
css reset http://meyerweb.com/eric/tools/css/reset/
?   ?? 问号语法
https://animate.style/
npm install animate.css -S
http://greensock.com/docs/v3/GSAP/Tween css动画js库	npm install gsap -S 
http://lodashjs.com 库

posted @ 2024-12-14 13:46 KooTeam 阅读(507) 评论(0) 收藏举报

刷新页面返回顶部

KooTeam

Knowledge makes humble,ignorant makes proud!

Vue3 + vite + Ts + pinia + 实战 + 源码

Vue3 + vite + Ts + pinia + 实战 + 源码

P1 小满Vue3（课程导读）

P4小满Vue3（第三章认识目录和SFC

P5 小满Vue3（第四章模板语法&vue指令

P7 小满Vue3（第六章Ref全家桶）

P8小满Vue3（第七章Reactive全家桶

P9 小满Vue3（第八章toRef，toRefs,toRaw

P10 小满Vue3（第九章computed计算属性-购物车案例

P11 小满Vue3（第十章watch侦听器）

P12 小满Vue3（第十一章watchEffect高级侦听器

P13 小满Vue3（第十二章认识组件和生命周期

P15 小满Vue3（第十四章父子组件传参

P18 小满Vue3（第十六章-2动态组件补充知识

P19 小满Vue3（第十七章插槽全家桶

P20 小满Vue3（第十八章异步组件&代码分包&suspense

P21 小满Vue3（第十九章Teleport传送组件

P22 小满Vue3（第二十章keep-alive缓存组件

P23 小满Vue3（第二十一章transition组件基础用法

P24 小满Vue3（第二十一章-2transition结合animate.css

P25 小满Vue3（第二十一章-3transition生命周期和GSAP

P26 小满Vue3（第二十一章-4transition-Appear属性

P28 小满Vue3（第二十二章-2平面过度动画酷炫 数组打乱

P29 小满Vue3（第二十二章-3状态过度

P30 小满Vue3（第二十三章依赖注入provide/inject

P31 小满Vue3（第二十四章兄弟组件传参&Bus

P32 小满Vue3（第二十五章TSX）

P33 小满Vue3（彩蛋）

P34 小满Vue3（第二十六章组件v-model

P35 小满Vue3（第二十七章-自定义指令

P38 小满Vue3（第二十八章自定义Hooks

P39 小满Vue3（第二十九章全局函数和变量

P40 小满Vue3（第三十章自定义Vue插件

安装pinia

P69

P79 路由过渡动效果

P92 小满服务端Linux（第九章安装Nginx）

网络安全（canvas指纹追踪技术）

网络安全（CSS 键盘记录器-React）

网络安全（照片信息EXIF）

网络安全（蜜罐技术）

网络安全（自动化UI测试）

P104 网络安全（输入法）===P106

P107 小满网络安全（第七章网络模型）

用到技术

公告

P28 小满Vue3（第二十二章-2平面过度动画酷炫数组打乱