首页 前端知识 Vite Typescript Vue3学习笔记

Vite Typescript Vue3学习笔记

2024-04-19 21:04:40 前端知识 前端哥 352 433 我要收藏

Vite+Typescript+Vue3学习笔记

1、项目搭建

1.1、创建项目(yarn)

D:\WebstromProject>yarn create vite
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-vite@4.4.1" with binaries:
      - create-vite
      - cva
√ Project name: ... vite-project
√ Select a framework: » Vue
√ Select a variant: » TypeScript

Scaffolding project in D:\WebstromProject\vite-project...

Done. Now run:

  cd vite-project
  yarn
  yarn dev

Done in 14.81s.

在这里插入图片描述

1.2、项目配置

1、配置vue文件识别

vite默认情况下不识别.vue后缀的文件,需在vite-env.d.ts配置下

/// <reference types="vite/client" />
declare module "*.vue" {
    import { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
}
2、Api选择
/* Options API */
export default {
  props: {},
  data(){},
  computed: {},
  watch: {},
  methods: {},
  created(),
  components:{}
  // ...other options
}
/* Composition API */
export default {
  props: {},
  setup(),
  components:{}
}

Vue3推荐使用Composition API,这里关闭Vue2的Option Api

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    define: {
        // 关闭Vue2 Options Api
        __VUE_OPTIONS_API__: false
    },
    plugins: [
        vue(),
    ],
})

1.3、常用依赖

1、@types/node

ts需安装node的类型,否则使用node相关会提示找不到

# @types/node
yarn add -D @types/node
2、auto-import

用于简化Vue3中ref、reactive**、**watch和UI组件的导入

# unplugin-vue-components(自动导入components下的组件)、unplugin-auto-import(自动导入ref等)
yarn add -D unplugin-vue-components unplugin-auto-import
3、sass
# sass
yarn add -D sass
4、pinia
# pinia
yarn add -D pinia
5、router
# router
yarn add -D vue-router
6、eslint
# eslint
yarn add -D eslint
# vite-plugin-eslint(vite运行的时候自动检测eslint规范)
yarn add -D vite-plugin-eslint
7、prettier
# prettier、eslint-config-prettier(关掉所有和Prettier冲突的ESLint的配置)、eslint-plugin-prettier(将Prettier的rules以插件的形式加入到 ESLint里面)
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

1.4、devtools

1、下载

https://github.com/vuejs/devtools

2、构建
yarn install
# 等一段时间 控制台不再输出内容ctrl+c退出执行yarn run dev:chrome
yarn run build:watch
# 执行完毕在packages\shell-chrome下找build文件夹
yarn run dev:chrome
3、chrome添加扩展

将packages\shell-chrome文件夹拖入chrome浏览器扩展

4、使用

在这里插入图片描述

2、Composition API

2.1、响应式

可以在chrome浏览器开启自定义格式化,便于查看
在这里插入图片描述
在这里插入图片描述

1、ref

ref通常用于声明基础类型响应式数据,引用类型也可以,会隐式调用reactive,同时取值赋值都需要.value

<script setup lang="ts">
import {Ref} from "vue";
// 非响应式
// let number: number = Math.random()
// console.log(isRef(number))

// 响应式
// let number = ref(Math.random())
// 显式类型约束
let number: Ref<number> = ref<number>(Math.random())
console.log(isRef(number))
const h1click = () => {
    // 非响应式
    // number = Math.random()

    // 响应式
    number.value = Math.random()
    console.log(number);
}
</script>

<template>
    <div>
        <h1 @click="h1click">{{ number }}</h1>
    </div>
</template>

<style scoped>

</style>
2、shallowRef

只处理基本数据类型的响应式, 不进行对象的响应式处理(不能与ref一起用,否则会被迫更新视图)

<script setup lang="ts">
import {isShallow, Ref} from "vue";

let number = shallowRef<number>(Math.random())
console.log(isShallow(number))
const h1click = () => {
    number.value = Math.random()
    console.log(number);
}
</script>

<template>
    <div>
        <h1 @click="h1click">{{ number }}</h1>
    </div>
</template>

<style scoped>

</style>
3、reactive

reactive用于声明引用类型响应式数据,且对象解构后会失去响应式

<script setup lang="ts">

let person = reactive({
    name: "xumeng"
})
console.log(isReactive(person))
const h1click = () => {
    person.name = "xumeng03"
    console.log(person);
}
</script>

<template>
    <div>
        <h1 @click="h1click">{{ person }}</h1>
    </div>
</template>

<style scoped>

</style>
4、shallowReactive

只处理对象最外层属性的响应式(浅响应式),(不能与reactive一起用,否则会被迫更新视图)

<script setup lang="ts">

let person = shallowReactive({
    name: "xumeng",
    hobby: [
        "game",
        "code"
    ]
})
console.log(isReactive(person))
const h1click = () => {
    // 浅层次数据
    // person.name = "xumeng03"
    // 深层次数据(如果浅层次&深层次数据一起变化,则会一起更新)
    person.hobby[0] = 'movie'
    console.log(person);
}
</script>

<template>
    <div>
        <h1 @click="h1click">{{ person }}</h1>
    </div>
</template>

<style scoped>

</style>
5、toRef

将对象某个属性变为响应式

<script setup lang="ts">

let person = reactive({
    name: "xumeng"
})
// 如果person非响应式对象,则不会引起视图更新
let name = toRef(person, 'name')
const h1click = () => {
    name.value = "xumeng03"
    console.log(person);
}
</script>

<template>
    <div>
        <h1 @click="h1click">{{ person }}</h1>
    </div>
</template>

<style scoped>

</style>

6、toRefs

将对象的一些解构属性变为响应式

<script setup lang="ts">

let person = reactive({
    name: "xumeng",
    age: 22
})
// 解构别名
let {name: pname, age: page} = toRefs(person)
const h1click = () => {
    pname.value = "xumeng03"
    page.value = 23
    console.log(pname, page);
}
</script>

<template>
    <div>
        <h1 @click="h1click">{{ person }}</h1>
    </div>
</template>

<style scoped>

</style>

7、toRaw

把响应式对象变为普通对象

<script setup lang="ts">

let person = reactive({
    name: "xumeng",
    age: 22
})

let rperson = toRaw(person)
const h1click = () => {
    rperson.name = "xumeng03"
    rperson.age = 23
    console.log(rperson);
}
</script>

<template>
    <div>
        <h1 @click="h1click">{{ person }}</h1>
    </div>
</template>

<style scoped>

</style>

2.2、修饰符

1、readonly
<script setup lang="ts">

let person = reactive({
    name: "xumeng"
})
let rperson = readonly(person)
const h1click = () => {
    // 正常赋值
    person.name = "xumeng03"
    // 报错
    // rperson.name = "xumeng03"
    console.log(person);
}
</script>

<template>
    <div>
        <h1 @click="h1click">{{ person }}</h1>
    </div>
</template>

<style scoped>

</style>

2.3、computed

1、选项式写法

参数为对象,需传入一个get和set函数自定义存取操作

<script setup lang="ts">

let person = reactive({
    name: "xumeng03",
    nickName: '眼眸流转',
    age: 22
})
let people = computed({
    get() {
        return person.name + '-' + person.nickName
    },
    set(newValue) {
        [person.name, person.nickName] = newValue.split('-')
    }
})
const h1click = () => {
    people.value = '徐梦-眼眸'
}
</script>

<template>
    <div>
        <h1 @click="h1click">{{ people }}</h1>
    </div>
</template>

<style scoped>

</style>
2、函数式写法
<script setup lang="ts">

let person = reactive({
    name: "xumeng03",
    nickName: '眼眸流转',
    age: 22
})
let people=computed(()=>{
    return person.name + '-' + person.nickName
})
const h1click = () => {
    // 不支持修改
    // people.value = '徐梦-眼眸'
}
</script>

<template>
    <div>
        <h1 @click="h1click">{{ people }}</h1>
    </div>
</template>

<style scoped>

</style>

2.4、监听

1、watch

基本类型

<script setup lang="ts">

let age = ref(22)
const h1click = () => {
    age.value++
}
watch(age, (value, oldValue) => {
    console.log("监听到变化:", value, oldValue);
})
</script>

<template>
    <div>
        <h1 @click="h1click">{{ age }}</h1>
    </div>
</template>

<style scoped>

</style>

引用类型

<script setup lang="ts">

let person = reactive({
    name: "xumeng03",
    nickName: '眼眸流转',
    age: 22
})
let person1 = reactive({
    name: "xumeng03",
    nickName: '眼眸流转',
    age: 22
})
const h1click = () => {
    person.age++
}
let people = computed(() => {
    return person.name + '-' + person.nickName + '-' + person.age
})

// 此时若监听person会发现新旧数据一致,可以使用computed处理一下返回(如返回新的信息或深拷贝原引用数据)
// watch(person, (value, oldValue) => {
//     console.log("监听到变化:", value, oldValue);
// }, {
//     // 深度监听,reactive默认就是深度监听
//     deep: true,
//     // 立即执行一次
//     immediate: true,
//     // 刷新时机
//     flush: 'pre'
// })

// 监听整个引用数据
watch(people, (value, oldValue) => {
    console.log("监听到变化:", value, oldValue);
}, {
    // 深度监听,reactive默认就是深度监听
    deep: true,
    // 立即执行一次
    immediate: true,
    // 刷新时机
    flush: 'pre'
})

// 监听引用对象某个属性
watch(() => person.age, (value, oldValue) => {
    console.log("监听到变化:", value, oldValue);
}, {
    // 深度监听,reactive默认就是深度监听
    deep: true,
    // 立即执行一次
    immediate: true,
    // 刷新时机
    flush: 'pre'
})

// 监听多个数据源
watch([person, person1], (value, oldValue) => {
    console.log("监听到变化:", value, oldValue);
}, {
    // 深度监听,reactive默认就是深度监听
    deep: true,
    // 立即执行一次
    immediate: true,
    // 刷新时机
    flush: 'pre'
})
</script>

<template>
    <div>
        <h1 @click="h1click">{{ people }}</h1>
    </div>
</template>

<style scoped>

</style>
2、watchEffect
 <script setup lang="ts">

let age = ref(22)
const h1click = () => {
    age.value++
}
// watchEffect返回一个停止监听函数
const stopwatch = watchEffect((oninvalidate) => {
    oninvalidate(() => {
        console.log("变化前");
    })
    console.log(age);
})
// 停止监听
// stopwatch()
</script>

<template>
    <div>
        <h1 @click="h1click">{{ age }}</h1>
    </div>
</template>

<style scoped>

</style>

3、组件

3.1、全局组件

全局组件

<script setup lang="ts">

</script>

<template>
    <div>
        这是一个card
    </div>
</template>

<style scoped lang="scss">

</style>

注册

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";
import Card from "./components/Card.vue";
// 这里要注册下组件
createApp(App).component('Card',Card).use(router).mount('#app')
// 批量注册
// let app = createApp(App)
// import Card from "./components/Card.vue";
// const components = [
//     Card
// ];
// for (const componentsKey in components) {
//     app.component(componentsKey, components[componentsKey])
// }

使用

<script setup lang="ts">

import HomeView from "./view/HomeView.vue";

let HomeViewFlag = ref(true)
</script>

<template>
    <div>
        <a @click="()=>{HomeViewFlag=!HomeViewFlag}">
            <img src="/vite.svg" class="logo" alt="Vite logo"/>
        </a>
        <a @click="()=>HomeViewFlag=!HomeViewFlag">
            <img src="./assets/vue.svg" class="logo vue" alt="Vue logo"/>
        </a>
    </div>
    <HomeView v-if="HomeViewFlag"/>
    <Card/>
</template>

<style scoped lang="scss">
.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;

    &:hover {
        filter: drop-shadow(0 0 2em #646cffaa);
    }

    .vue {
        &:hover {
            filter: drop-shadow(0 0 2em #42b883aa);
        }
    }
}
</style>

3.2、局部组件

局部组件

<script setup lang="ts">
let age = ref(22)
const h1click = () => {
    age.value++
}
</script>

<template>
    <div>
        <h1 @click="h1click">年龄:{{ age }}</h1>
    </div>
</template>
<style scoped lang="scss">
h1 {
    color: $theColor;
}
</style>

使用

<script setup lang="ts">

import HomeView from "./view/HomeView.vue";

let HomeViewFlag = ref(true)
</script>

<template>
    <div>
        <a @click="()=>{HomeViewFlag=!HomeViewFlag}">
            <img src="/vite.svg" class="logo" alt="Vite logo"/>
        </a>
        <a @click="()=>HomeViewFlag=!HomeViewFlag">
            <img src="./assets/vue.svg" class="logo vue" alt="Vue logo"/>
        </a>
    </div>
    <HomeView v-if="HomeViewFlag"/>
</template>

<style scoped lang="scss">
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;

  &:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }

  .vue {
    &:hover {
      filter: drop-shadow(0 0 2em #42b883aa);
    }
  }
}
</style>

3.3、递归组件

组件

<script setup lang="ts">
interface Tree {
    name: string,
    checked: boolean,
    children?: Tree[]
}

const props = defineProps<{
    data: Tree[]
}>()

// 自定义名称
defineOptions({
    name: "myTree"
})
</script>

<template>
    <div v-for="item in data">
        <input type="checkbox" :checked="item.checked"/> <span>{{ item.name }}</span>
        <!--<Tree v-if="item?.children?.length" :data="item?.children"/>-->
        <myTree v-if="item?.children?.length" :data="item?.children"/>
    </div>
</template>

<style scoped lang="scss">

</style>

使用

<script setup lang="ts">
let age = ref(22)
const h1click = () => {
    age.value++
}

interface Tree {
    name: string,
    checked: boolean,
    children?: Tree[]
}

const data = reactive<Tree[]>([
    {
        name: "1",
        checked: true,
        children: [
            {
                name: "1-1",
                checked: false,
                children: [
                    {
                        name: "1-1-1",
                        checked: true
                    },
                ]
            },
            {
                name: "1-2",
                checked: true
            },
        ]
    },
    {
        name: "2",
        checked: false,
        children: [
            {
                name: "2-1",
                checked: false
            },
            {
                name: "2-2",
                checked: true
            },
            {
                name: "2-3",
                checked: true
            },
        ]
    },
    {
        name: "3",
        checked: false,
        children: [
            {
                name: "3-1",
                checked: false
            },
        ]
    }
])
</script>

<template>
    <div>
        <h1 @click="h1click">年龄:{{ age }}</h1>
    </div>
    <div>
        <Tree :data="data"></Tree>
    </div>
</template>
<style scoped lang="scss">
h1 {
    color: $theColor;
}
</style>

3.4、父子组件传参

1、父传子(defineProps)

父组件

<script setup lang="ts">
let PtoC1 = ref(1)
let PtoC2 = ref({
    name: 'xumeng03',
    age: 22
})
</script>

<template>
    <div>
        我是父组件
        <hr>
        <Child :PtoC1="PtoC1" :PtoC2="PtoC2"/>
    </div>
</template>

<style scoped lang="scss">

</style>

子组件

<script setup lang="ts">
// js形式
// const props = defineProps({
//     PtoC1: {
//         type: Number,
//         default: '默认值'
//     },
//     PtoC2: {
//         type: Object,
//         default: {}
//     }
// })

// typescript类型约束
const props = defineProps<{
    PtoC1: number,
    PtoC2: {
        name: string,
        age: number
    }
}>()

// typescript默认值
withDefaults(defineProps<{
    PtoC1: number,
    PtoC2: {
        name: string,
        age: number
    }
}>(), {
    PtoC1: 0, PtoC2: () => ({name: 'name', age: 0})
})
</script>

<template>
    <div>
        我是子组件
        <br>
        <!--来自父组件的消息1: {{ FtoC }}-->
        来自父组件的消息1: {{ props.PtoC1 }}
        <br>
        来自父组件的消息2: {{ props.PtoC2 }}
    </div>
</template>

<style scoped lang="scss">

</style>
2、子传父(defineEmits)

父组件

<script setup lang="ts">
let Pmessage1 = ref<string>()
let Pmessage2 = reactive<{
    name: string,
    age: number
}>({
    name: 'name',
    age: 0
})
const getChildMessage1 = (message: string) => {
    Pmessage1.value = message
}
const getChildMessage2 = (message: {
    name: string,
    age: number
}) => {
    Pmessage2 = message
}
</script>

<template>
    <div>
        我是父组件
        <br>
        来自父组件的消息1: {{ Pmessage1 }}
        <br>
        来自父组件的消息1: {{ Pmessage2 }}
        <hr>
        <Child @getChildMessage1="getChildMessage1" @getChildMessage2="getChildMessage2"/>
    </div>
</template>

<style scoped lang="scss">

</style>

子组件

<script setup lang="ts">
let message1 = ref("xumeng03")
let message2 = reactive({
    name: 'xumeng03',
    age: 22
})
// const emit = defineEmits(['getChildMessage1', 'getChildMessage2'])
const emit = defineEmits<{
    (e: 'getChildMessage1', message: string): void,
    (e: 'getChildMessage2', message: {
        name: string,
        age: number
    }): void
}>()
const transValue = () => {
    emit('getChildMessage1', message1.value)
    emit('getChildMessage2', message2)
}
</script>

<template>
    <div @click="transValue">
        我是子组件
    </div>
</template>

<style scoped lang="scss">

</style>
3、父组件访问子组件(defineExpose)

父组件

<script setup lang="ts">
import Child from "@/components/Child.vue";

const child1 = ref<InstanceType<typeof Child>>()
const childAttributes = () => {
    console.log(child1.value.username)
    child1.value.changeName('xumeng03' + Math.ceil(Math.random() * 10))
}
</script>

<template>
    <div @click="childAttributes">
        我是父组件
        <br>
        子组件属性:{{ child1 }}
        <hr>
        <Child ref="child1"/>
    </div>
</template>

<style scoped lang="scss">

</style>

子组件

<script setup lang="ts">
let username = ref("child")
const changeName = (newName: string) => {
    console.log("newName:" + newName)
    username.value = newName
}

defineExpose({
    username,
    changeName
})
</script>

<template>
    <div>
        我是子组件
    </div>
</template>

<style scoped lang="scss">

</style>

3.5、兄弟组件传参

1、通过父组件传参

父组件

<script setup lang="ts">
let c1_msg = ref<string>('')
const shareMsg = (message: string) => {
    console.log(message);
    c1_msg.value = message
}
</script>

<template>
    <div id="parent">
        <Child tag="111" :c1_msg="c1_msg" @onshareMsg="shareMsg"></Child>
        <hr>
        <Child tag="222" :c1_msg="c1_msg" @onshareMsg="shareMsg"></Child>
    </div>
</template>

<style scoped lang="scss">
#parent {
    color: v-bind(color);
    background-color: #ffffff;
}
</style>

子组件

<script setup lang="ts">
const props = defineProps<{
    tag: string,
    c1_msg: string
}>()

let msg = ref('我是组件' + props.tag + '的消息')
const emit = defineEmits<{
    (e: 'onshareMsg', message: string): void,
}>()
const shareMsg = () => {
    console.log(msg.value)
    emit('onshareMsg', msg.value)
}
</script>

<template>
    <div @click="shareMsg" class="child">
        组件{{ props.tag }}
        <p>{{ props.c1_msg }}</p>
    </div>
</template>

<style scoped lang="scss">
#child {
    color: v-bind(color);
    background-color: #ffffff;
}
</style>
2、通过Event Bus传参

Vue3移除Event Bus,可使用替代方案mitt

待补。。。

3.6、动态组件(component)

<script setup lang="ts">
import Card from "@/components/Card.vue";
import Tree from "@/components/Tree.vue";
import {DefineComponent} from "vue";

let age = ref(22)
const h1click = () => {
    age.value++
}

interface Tree {
    name: string,
    checked: boolean,
    children?: Tree[]
}

const data = reactive<Tree[]>([
    {
        name: "1",
        checked: true,
        children: [
            {
                name: "1-1",
                checked: false,
                children: [
                    {
                        name: "1-1-1",
                        checked: true
                    },
                ]
            },
            {
                name: "1-2",
                checked: true
            },
        ]
    },
    {
        name: "2",
        checked: false,
        children: [
            {
                name: "2-1",
                checked: false
            },
            {
                name: "2-2",
                checked: true
            },
            {
                name: "2-3",
                checked: true
            },
        ]
    },
    {
        name: "3",
        checked: false,
        children: [
            {
                name: "3-1",
                checked: false
            },
        ]
    }
])
const buttons = [
    {
        name: '组件1',
        component: Card
    },
    {
        name: '组件2',
        component: Tree
    },
]
const btnclick = (item: {
    name: string,
    component: DefineComponent<{}, {}, any>
}) => {
    componentDefault.value = item.component
}
// 使用shallowRef节约性能
let componentDefault = shallowRef(Card)
</script>

<template>
    <div>
        <h1 @click="h1click">年龄:{{ age }}</h1>
        <div>
            <button @click="btnclick(item)" v-for="item in buttons">{{ item.name }}</button>
        </div>
        <component :is="componentDefault" :data="data"></component>
    </div>
</template>
<!--注意style必须加上lang="scss"-->
<style scoped lang="scss">
h1 {
    color: $theColor;
}
</style>

3.7、插槽(slot)

1、匿名插槽

匿名插槽在一个组件中只能有一个

<script setup lang="ts">

</script>

<template>
    <div>
        <slot>
            <!--插槽默认值-->
            <span>这个插槽好像是空的?</span>
        </slot>
    </div>
</template>

<style scoped lang="scss">

</style>

使用

<script setup lang="ts">

let age = ref(22)
const h1click = () => {
    age.value++
}

</script>

<template>
    <div>
        <h1 @click="h1click">年龄:{{ age }}</h1>
        <Card>
            测试插槽
        </Card>
    </div>
</template>
<!--注意style必须加上lang="scss"-->
<style scoped lang="scss">
h1 {
    color: $theColor;
}
</style>
2、具名插槽
<script setup lang="ts">

</script>

<template>
    <div>
        <div>
            <slot name="title">
                <!--插槽默认值-->
                <span>这个组件标题好像是空的?</span>
            </slot>
        </div>
        <div>
            <slot name="content">
                <!--插槽默认值-->
                <span>这个组件内容好像是空的?</span>
            </slot>
        </div>
        <div>
            <slot>
                <!--插槽默认值-->
                <span>这个组件操作项好像是空的?</span>
            </slot>
        </div>
    </div>
</template>

<style scoped lang="scss">

</style>

使用

<script setup lang="ts">

let age = ref(22)
const h1click = () => {
    age.value++
}

</script>

<template>
    <div>
        <h1 @click="h1click">年龄:{{ age }}</h1>
        <Card>
            <template #title>
                组件标题
            </template>
            <template v-slot:content>
                组件标题
            </template>
            <template v-slot>
                组件操作项
            </template>
        </Card>
    </div>
</template>
<!--注意style必须加上lang="scss"-->
<style scoped lang="scss">
h1 {
    color: $theColor;
}
</style>
3、插槽传参

组件

<script setup lang="ts">
let titleData = ref("slot中的值")
</script>

<template>
    <div>
        <div>
            <slot name="title" :data="titleData">
                <!--插槽默认值-->
                <span>这个组件标题好像是空的?</span>
            </slot>
        </div>
        <div>
            <slot name="content">
                <!--插槽默认值-->
                <span>这个组件内容好像是空的?</span>
            </slot>
        </div>
        <div>
            <slot>
                <!--插槽默认值-->
                <span>这个组件操作项好像是空的?</span>
            </slot>
        </div>
    </div>
</template>

<style scoped lang="scss">

</style>

使用

<script setup lang="ts">

let age = ref(22)
const h1click = () => {
    age.value++
}
</script>

<template>
    <div>
        <h1 @click="h1click">年龄:{{ age }}</h1>
        <Card>
            <template #title="children">
                组件标题-{{ children.data }}
            </template>
            <template v-slot:content>
                组件标题
            </template>
            <template v-slot>
                组件操作项
            </template>
        </Card>
    </div>
</template>
<!--注意style必须加上lang="scss"-->
<style scoped lang="scss">
h1 {
    color: $theColor;
}
</style>
4、动态插槽

组件

<script setup lang="ts">
let titleData = ref("slot中的值")
</script>

<template>
    <div>
        <div>
            <slot name="title" :data="titleData">
                <!--插槽默认值-->
                <span>这个组件标题好像是空的?</span>
            </slot>
        </div>
        <div>
            <slot name="content" :data="titleData">
                <!--插槽默认值-->
                <span>这个组件内容好像是空的?</span>
            </slot>
        </div>
        <div>
            <slot :data="titleData">
                <!--插槽默认值-->
                <span>这个组件操作项好像是空的?</span>
            </slot>
        </div>
    </div>
</template>

<style scoped lang="scss">

</style>

使用

<script setup lang="ts">

let age = ref(22)
const h1click = () => {
    age.value++
}
let position = 'content'
</script>

<template>
    <div>
        <h1 @click="h1click">年龄:{{ age }}</h1>
        <Card>
            <template #[position]="children">
                组件-{{ children.data }}
            </template>
        </Card>
    </div>
</template>
<!--注意style必须加上lang="scss"-->
<style scoped lang="scss">
h1 {
    color: $theColor;
}
</style>

3.8、异步组件(Suspense)

组件

<script setup lang="ts">
const title = ref('')
const init = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      title.value = "xumeng03"
      resolve()
    }, 2000);
  })
}
await init()
</script>

<template>
  {{ title }}
</template>

<style scoped lang="scss">

</style>

使用

<script setup lang="ts">

let age = ref(22)
const h1click = () => {
    age.value++
}
// 必须异步导入组件
const Async = defineAsyncComponent(() => import('@/components/Async.vue'))
</script>

<template>
    <div>
        <h1 @click="h1click">年龄:{{ age }}</h1>
        <Suspense>
            <template #default>
                <Async></Async>
            </template>
            <template #fallback>
                "还没有准备好哦"
            </template>
        </Suspense>
    </div>
</template>

<style scoped lang="scss">
h1 {
    color: $theColor;
}
</style>

3.9、传送组件(Teleport)

组件

<script setup lang="ts">

</script>

<template>
    <div id="teleport">
        被传送节点
    </div>
</template>

<style scoped lang="scss">
#teleport {
    position: absolute;
}
</style>

使用

<script setup lang="ts">

let age = ref(22)
const h1click = () => {
    age.value++
}
</script>

<template>
    <div>
        <h1 @click="h1click">年龄:{{ age }}</h1>
        <!--<Modal></Modal>-->
        <!--disabled是否启用传送,to把组件放在哪里-->
        <Teleport :disabled="false" to="body">
            <Modal></Modal>
        </Teleport>
    </div>
</template>

<style scoped lang="scss">
h1 {
    color: $theColor;
}
</style>

3.10、缓存组件(keep-alive)

keep-alive会新增onActivated、onDeactivated生命周期

// 挂载keep-alive内组件
onActivated(() => {
    console.log('keep-alive组件挂载');
})
// 卸载keep-alive内组件
onDeactivated(() => {
    console.log('keep-alive组件卸载');
})

使用

<script setup lang="ts">
import Card from "@/components/Card.vue";
import Tree from "@/components/Tree.vue";
import {DefineComponent} from "vue";

let age = ref(22)
const h1click = () => {
    age.value++
}

interface Tree {
    name: string,
    checked: boolean,
    children?: Tree[]
}

const data = reactive<Tree[]>([
    {
        name: "1",
        checked: true,
        children: [
            {
                name: "1-1",
                checked: false,
                children: [
                    {
                        name: "1-1-1",
                        checked: true
                    },
                ]
            },
            {
                name: "1-2",
                checked: true
            },
        ]
    },
    {
        name: "2",
        checked: false,
        children: [
            {
                name: "2-1",
                checked: false
            },
            {
                name: "2-2",
                checked: true
            },
            {
                name: "2-3",
                checked: true
            },
        ]
    },
    {
        name: "3",
        checked: false,
        children: [
            {
                name: "3-1",
                checked: false
            },
        ]
    }
])
const buttons = [
    {
        name: '组件1',
        component: Card
    },
    {
        name: '组件2',
        component: Tree
    },
]
const btnclick = (item: {
    name: string,
    component: DefineComponent<{}, {}, any>
}) => {
    componentDefault.value = item.component
}
// 使用shallowRef节约性能
let componentDefault = shallowRef(Card)
</script>

<template>
    <div>
        <h1 @click="h1click">年龄:{{ age }}</h1>
        <div>
            <button @click="btnclick(item)" v-for="item in buttons">{{ item.name }}</button>
        </div>
        <keep-alive :exclude="['Card']">
            <component :is="componentDefault" :data="data">
                测试插槽
            </component>
        </keep-alive>
    </div>
</template>
<!--注意style必须加上lang="scss"-->
<style scoped lang="scss">
h1 {
    color: $theColor;
}
</style>

3.11、组件过渡(transition)

  • v-if 所触发的切换
  • v-show 所触发的切换
  • <component> 切换的动态组件
1、name指定动画
<script setup lang="ts">

let age = ref(22)
const h1click = () => {
    age.value++
}
let flag = ref(true)
</script>

<template>
    <div>
        <h1 @click="h1click">年龄:{{ age }}</h1>
        <button @click="()=>flag=!flag">切换</button>
        <transition name="v">
            <div v-if="flag" id="div">
                我是一个div
            </div>
            <!--<div v-show="flag" id="div">-->
            <!--    我是一个div-->
            <!--</div>-->
        </transition>
    </div>
</template>
<!--注意style必须加上lang="scss"-->
<style scoped lang="scss">
h1 {
    color: $theColor;
}

#div {
    background-color: lightgreen;
}

.v-enter-active,.v-leave-active{
    transition: all 0.5s;
}
.v-enter-from,.v-leave-to{
    transform: translateY(-20px);
    opacity: 0;
}
.v-enter-to,.v-leave-from{
    transition: all 0.5s;
}
</style>
2、class指定动画
<script setup lang="ts">

let age = ref(22)
const h1click = () => {
    age.value++
}
let flag = ref(true)
</script>

<template>
    <div>
        <h1 @click="h1click">年龄:{{ age }}</h1>
        <button @click="()=>flag=!flag">切换</button>
        <transition
            :duration="{enter: 50,leave:500}"
            enter-from-class="v-enter-from"
            enter-to-class="v-enter-to"
            enter-active-class="v-enter-active"
            leave-from-class="v-leave-from"
            leave-active-class="v-leave-active"
            leave-to-class="v-leave-to"
        >
            <div v-if="flag" id="div">
                我是一个div
            </div>
        </transition>
    </div>
</template>
<!--注意style必须加上lang="scss"-->
<style scoped lang="scss">
h1 {
    color: $theColor;
}

#div {
    background-color: lightgreen;
}

.v-enter-active, .v-leave-active {
    transition: all 0.5s;
}

.v-enter-from, .v-leave-to {
    transform: translateY(-20px);
    opacity: 0;
}

.v-enter-to, .v-leave-from {
    transition: all 0.5s;
}
</style>
3、生命周期
<script setup lang="ts">

let age = ref(22)
const h1click = () => {
    age.value++
}
let flag = ref(true)
const onBeforeEnter = () => {
    console.log('元素进入前');
}
const onEnter = () => {
    console.log('元素进入时');
}
const onAfterEnter = () => {
    console.log('元素进入后');
}
const onEnterCancelled = () => {
    console.log('动画进入被打断');
}
const onBeforeLeave = () => {
    console.log('元素离开前');
}
const onLeave = () => {
    console.log('元素离开时');
}
const onAfterLeave = () => {
    console.log('元素离开后');
}
const onLeaveCancelled = () => {
    console.log('动画离开被打断');
}
</script>

<template>
    <div>
        <h1 @click="h1click">年龄:{{ age }}</h1>
        <button @click="()=>flag=!flag">切换</button>
        <transition
            :duration="{enter: 50,leave:500}"
            enter-from-class="v-enter-from"
            enter-to-class="v-enter-to"
            enter-active-class="v-enter-active"
            leave-from-class="v-leave-from"
            leave-active-class="v-leave-active"
            leave-to-class="v-leave-to"
            @before-enter="onBeforeEnter"
            @enter="onEnter"
            @after-enter="onAfterEnter"
            @enter-cancelled="onEnterCancelled"
            @before-leave="onBeforeLeave"
            @leave="onLeave"
            @after-leave="onAfterLeave"
            @leave-cancelled="onLeaveCancelled"
        >
            <div v-if="flag" id="div">
                我是一个div
            </div>
        </transition>
    </div>
</template>
<!--注意style必须加上lang="scss"-->
<style scoped lang="scss">
h1 {
    color: $theColor;
}

#div {
    background-color: lightgreen;
}

.v-enter-active, .v-leave-active {
    transition: all 0.5s;
}

.v-enter-from, .v-leave-to {
    transform: translateY(-20px);
    opacity: 0;
}

.v-enter-to, .v-leave-from {
    transition: all 0.5s;
}
</style>
4、首次进入显示动画
<script setup lang="ts">

let age = ref(22)
const h1click = () => {
    age.value++
}
let flag = ref(true)
const onBeforeEnter = () => {
    console.log('元素进入前');
}
const onEnter = () => {
    console.log('元素进入时');
}
const onAfterEnter = () => {
    console.log('元素进入后');
}
const onEnterCancelled = () => {
    console.log('动画进入被打断');
}
const onBeforeLeave = () => {
    console.log('元素离开前');
}
const onLeave = () => {
    console.log('元素离开时');
}
const onAfterLeave = () => {
    console.log('元素离开后');
}
const onLeaveCancelled = () => {
    console.log('动画离开被打断');
}
</script>

<template>
    <div>
        <h1 @click="h1click">年龄:{{ age }}</h1>
        <button @click="()=>flag=!flag">切换</button>
        <transition
            appear
            enter-from-class="v-enter-from"
            enter-to-class="v-enter-to"
            enter-active-class="v-enter-active"
            leave-from-class="v-leave-from"
            leave-active-class="v-leave-active"
            leave-to-class="v-leave-to"
            @before-enter="onBeforeEnter"
            @enter="onEnter"
            @after-enter="onAfterEnter"
            @enter-cancelled="onEnterCancelled"
            @before-leave="onBeforeLeave"
            @leave="onLeave"
            @after-leave="onAfterLeave"
            @leave-cancelled="onLeaveCancelled"
        >
            <div v-if="flag" id="div">
                我是一个div
            </div>
        </transition>
    </div>
</template>
<!--注意style必须加上lang="scss"-->
<style scoped lang="scss">
h1 {
    color: $theColor;
}

#div {
    background-color: lightgreen;
}

.v-enter-active, .v-leave-active {
    transition: all 0.5s;
}

.v-enter-from, .v-leave-to {
    transform: translateY(-20px);
    opacity: 0;
}

.v-enter-to, .v-leave-from {
    transition: all 0.5s;
}
</style>
5、transition-group
<script setup lang="ts">

let age = ref(22)
const h1click = () => {
    age.value++
}
const arr = reactive([
    {
        number: 1
    },
    {
        number: 2
    }
])
</script>

<template>
    <div>
        <h1 @click="h1click">年龄:{{ age }}</h1>
        <button @click="arr.push({number: Math.ceil(Math.random() * 10)})">添加</button>
        <button @click="()=>arr.pop()">删除</button>
        <transition-group
            appear
            enter-from-class="v-enter-from"
            enter-to-class="v-enter-to"
            enter-active-class="v-enter-active"
            leave-from-class="v-leave-from"
            leave-active-class="v-leave-active"
            leave-to-class="v-leave-to"
        >
            <div v-for="(item,index) in arr" :key="index" class="div">
                {{ item.number }}
            </div>
        </transition-group>
    </div>
</template>
<!--注意style必须加上lang="scss"-->
<style scoped lang="scss">
h1 {
    color: $theColor;
}

.div {
    background-color: lightgreen;
}

.v-enter-active, .v-leave-active {
    transition: all 0.5s;
}

.v-enter-from, .v-leave-to {
    transform: translateY(-20px);
    opacity: 0;
}

.v-enter-to, .v-leave-from {
    transition: all 0.5s;
}
</style>

3.12、provide&inject

child.vue

<script setup lang="ts">
import {Ref} from "vue";

let color = inject<Ref<string>>('color')
</script>

<template>
    <div id="child">
        子组件
    </div>
</template>

<style scoped lang="scss">
#child {
    color: v-bind(color);
    background-color: #ffffff;
}
</style>

parent.vue

<script setup lang="ts">
import {Ref} from "vue";

let color = inject<Ref<string>>('color')
</script>

<template>
    <div id="parent">
        父组件
        <hr>
        <Child></Child>
    </div>
</template>

<style scoped lang="scss">
#parent {
    color: v-bind(color);
    background-color: #ffffff;
}
</style>

App.vue

<script setup lang="ts">
let color = ref('#0f0')
let buttons = [
    {
        key: '红色',
        value: 'red'
    },
    {
        key: '黄色',
        value: 'yellow'
    },
    {
        key: '绿色',
        value: 'green'
    },
]
provide('color', color)
const colorChange = (value) => {
    color.value = value
}
</script>

<template>
    <div id="xumeng03">
        <a>
            <img src="/vite.svg" class="logo" alt="Vite logo"/>
        </a>
        <a>
            <img src="./assets/vue.svg" class="logo vue" alt="Vue logo"/>
        </a>
        <div>
            <button v-for="button in buttons" @click="colorChange(button.value)">{{ button.key }}</button>
        </div>
        <Parent></Parent>
    </div>
</template>

<style scoped lang="scss">

.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;

    &:hover {
        filter: drop-shadow(0 0 2em #646cffaa);
    }

    .vue {
        &:hover {
            filter: drop-shadow(0 0 2em #42b883aa);
        }
    }
}
</style>

5、生命周期

<script setup lang="ts">
let age = ref(22)
let h1 = ref<HTMLElement>()
// 生命周期(setup模式下无beforeCreate和created)

// 挂载前
onBeforeMount(() => {
    console.log('挂载前', h1.value);
})
// 挂载完成
onMounted(() => {
    console.log('挂载完成', h1.value);
})

// 更新前
onBeforeUpdate(() => {
    console.log('更新前', h1.value?.innerText);
})
// 更新完成
onUpdated(() => {
    console.log('更新完成', h1.value?.innerText);
})

// 销毁前
onBeforeUnmount(() => {
    console.log('销毁前');
})
// 销毁后
onBeforeUnmount(() => {
    console.log('销毁后');
})
const h1click = () => {
    age.value++
}
</script>

<template>
    <div>
        <h1 @click="h1click" ref="h1">{{ age }}</h1>
    </div>
</template>

<style scoped>

</style>

5、指令

5.1、v-model

1、内置组件使用
<script setup lang="ts">
let text = ref('')

</script>

<template>
    <div>
        <input type="text" v-model="text">
        <!--等价于-->
        <!--<input type="text" :value="text" @input="text=$event.target.value">-->
        <p>{{ text }}</p>
    </div>
</template>

<style scoped lang="scss">

</style>
2、自定义组件使用

组件

<script setup lang="ts">
const props = defineProps<{
    modelValue: string
}>()
const emit = defineEmits([
    'update:modelValue'
])
const changeModelValue = () => {
    emit('update:modelValue', Math.random().toString())
}
</script>

<template>
    <div @click="changeModelValue">
        {{ props.modelValue }}
    </div>
</template>

<style scoped lang="scss">

</style>

使用

<script setup lang="ts">
let text = ref('')

</script>

<template>
    <div>
        <!--自定义组件(v-model绑定在自定义组件上时,需要手动去接收)-->
        <Card v-model="text"></Card>
        <!--等价于-->
        <Card :modelValue="text" @update:modelValue="text=$event"></Card>
    </div>
</template>

<style scoped lang="scss">

</style>
3、自定义v-model名称

v-model 默认绑定的属性名为:modelValue
v-model 默认绑定的事件名为:update:modelValue

组件

<script setup lang="ts">
const props = defineProps<{
    xumeng03: string
}>()
const emit = defineEmits([
    'update:xumeng03'
])
const changeModelValue = () => {
    emit('update:xumeng03', Math.random().toString())
}
</script>

<template>
    <div @click="changeModelValue">
        {{ props.xumeng03 }}
    </div>
</template>

<style scoped lang="scss">

</style>

使用

<script setup lang="ts">
let text = ref('')

</script>

<template>
    <div>
        <input type="text" v-model="text">
        <Card1 v-model:xumeng03="text"></Card1>
    </div>
</template>

<style scoped lang="scss">

</style>
4、多v-model

组件

<script setup lang="ts">
const props = defineProps<{
    xumeng: string,
    xumeng03: string
}>()
const emit = defineEmits([
    'update:xumeng',
    'update:xumeng03'
])
const changeModelValue = () => {
    emit('update:xumeng', Math.random().toString())
}
const changeModelValue03 = () => {
    emit('update:xumeng03', Math.random().toString())
}
</script>

<template>
    <div @click="changeModelValue">
        {{ props.xumeng }}
    </div>
    <div @click="changeModelValue03">
        {{ props.xumeng03 }}
    </div>
</template>

<style scoped lang="scss">

</style>

使用

<script setup lang="ts">
let text = ref('null')

</script>

<template>
    <div>
        <input type="text" v-model="text">
        <Card1 v-model:xumeng="text" v-model:xumeng03="text"></Card1>
    </div>
</template>

<style scoped lang="scss">

</style>
5、修饰符
  • .number: v-model 绑定在表单组件中不会出现数值类型,numer 可以将绑定的字符串转换为数值
  • .trim: 去掉绑定数据左右两侧的空格
  • .lazy: 表单组件绑定时生效,从原来绑定的 input 高频率触发事件改为 blur 低频率触发事件来提高性能
6、自定义v-model修饰符

组件

<script setup lang="ts">
const props = defineProps<{
    xumeng03: number
    xumeng03Modifiers?: {
        yanmou: boolean
    }
}>()
const emit = defineEmits([
    'update:xumeng03'
])
const changeModelValue = () => {
    emit('update:xumeng03', props.xumeng03Modifiers?.yanmou ? Math.ceil(Math.random() * 10) : -1)
}
</script>

<template>
    <div @click="changeModelValue">
        {{ props.xumeng03 }}
    </div>
</template>

<style scoped lang="scss">

</style>

使用

<script setup lang="ts">
let text = ref(0)

</script>

<template>
    <div>
        <input type="text" v-model="text">
        <Card1 v-model:xumeng03="text"></Card1>
        <Card1 v-model:xumeng03.yanmou="text"></Card1>
    </div>
</template>

<style scoped lang="scss">

</style>

5.2、自定义指令

1、基本使用
<script setup lang="ts">
import {Directive} from "vue";

let text = ref("xumeng03")
const vColor: Directive = {
    // 元素初始化
    created() {
    },
    // 挂载前
    beforeMount() {
    },
    // 挂载后
    mounted(el, binding, vNode) {
        // el:元素
        console.log(el);
        // binding.arg:指令名称即font
        // binding.modifiers:指令修饰符
        // binding.value:指令的值
        console.log(binding);
        // vNode:虚拟dom解构
        console.log(vNode);
    },
    // 更新前
    beforeUpdate() {
    },
    // 更新后
    updated(el, binding, vNode) {
        console.log(binding);
    },
    // 卸载前
    beforeUnmount() {
    },
    // 卸载后
    unmounted() {
    }
}
</script>

<template>
    <div>
        <input type="text" v-model="text">
        <Card v-color:font.readonly="text" :message="text"></Card>
    </div>
</template>

<style scoped lang="scss">

</style>
2、自定义指令-鉴权
<script setup lang="ts">
import {Directive} from "vue";

const operates=[
    'operate1',
    'operate2',
    // 'operate3',
]
const vCan: Directive = (el, binding) => {
    console.log(binding);
    if (!operates.includes(binding.value)){
        el.remove()
    }
}
</script>

<template>
    <div>
        <button v-can="'operate1'">操作1</button>
        <button v-can="'operate2'">操作2</button>
        <button v-can="'operate3'">操作3</button>
    </div>
</template>

<style scoped lang="scss">

</style>
3、自定义指令-图片懒加载
<script setup lang="ts">
import {Directive} from "vue";
import img from './assets/i.jpg'

// 懒加载
let imgs = Object.values(import.meta.glob('@/assets/img*.jpg')).map(item => item.name)
// 静态加载
// let imgs = import.meta.glob('@/assets/img*.jpg', {eager: true})

console.log(imgs);
const vImgLazy: Directive = async (el, binding) => {
    // console.log(el);
    let observer = new IntersectionObserver((entries) => {
        console.log(el, entries[0].intersectionRatio);
        if (entries[0].intersectionRatio > 0) {
            setTimeout(() => {
                el.src = binding.value
                // 取消监听
                observer.unobserve(el)
            }, 2000)
        }
    })
    // 监听元素
    observer.observe(el)
}
</script>

<template>
    <img v-for="(i,index) in imgs" v-img-lazy="i" :src="img" alt="">
</template>

<style scoped lang="scss">
img {
    display: inline-block !important;
    width: 390px;
    height: 585px;
}
</style>

5.3、自定义Hook

待补。。。

6、全局设置

6.1、全局变量

Vue3移除了prototype,需通过app.config.globalProperties来设置

1、设置全局变量
import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";

let app = createApp(App)
// 设置全局变量
app.config.globalProperties.$author = 'xumeng03'
app.use(router).mount('#app')
2、解决飘红

globalProperties.d.ts

// 全局变量报错
import { ComponentCustomProperties } from 'vue'

declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $author: string
    }
}
3、使用
<script setup lang="ts">

</script>

<template>
    <h1>{{ $author }}</h1>
</template>

<style scoped lang="scss">

</style>

6.2、全局样式/变量

1、全局样式

@/style/variables.scss

$theColor: lightblue;

h1 {
  font-size: 100px;
}
2、配置css预处理

vite.config.ts

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// 自动导入vue中ref、reactive、watch等
import AutoImport from "unplugin-auto-import/vite"
// 自动导入ui组件
import Components from 'unplugin-vue-components/vite';

// https://vitejs.dev/config/
export default defineConfig({
    define: {
        // 关闭Vue2 Options Api
        __VUE_OPTIONS_API__: false
    },
    plugins: [
        vue(),
        AutoImport({
            // 在组件中不用再导入ref、reactive、watch等
            imports: ['vue', 'vue-router'],
            // 声明文件存放的位置,会自动生成,无需自己维护
            dts: "src/auto-import.d.ts",
        }),
        Components({
            // 引入组件的存放的位置,包括自定义组件
            dts: "src/components.d.ts",
        }),
    ],
    resolve: {
        // 配置路径别名
        alias: {
            "@": path.resolve(__dirname, "./src"),
        },
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "@/style/variables.scss";`
            }
        }
    },
})
3、使用
<script setup lang="ts">
let age = ref(22)
const h1click = () => {
    age.value++
}
</script>

<template>
    <div>
        <h1 @click="h1click">年龄:{{ age }}</h1>
    </div>
</template>
<!--注意style必须加上lang="scss"-->
<style scoped lang="scss">
h1 {
  color: $theColor;
}
</style>

7、组件库

7.1、常用组件库

  • Element
  • Ant
  • Iview

7.2、样式穿透

待补。。。

8、nextTick

<script setup lang="ts">
const chats = reactive<Array<{
    message: string
}>>([])

let Rchats = ref<HTMLDivElement>()
let ipt = ref('')
// let send = () => {
//     chats.push({message: ipt})
//     nextTick(() => {
//         Rchats.value!.scrollTop = 999999
//     })
// }
let send = async () => {
    chats.push({message: ipt})
    // await nextTick()下面的都是异步的
    await nextTick()
    Rchats.value!.scrollTop = 999999
}
</script>

<template>
    <div>
        <div ref="Rchats" style="width: 400px;height: 300px;border: 1px solid #333;overflow-y: auto">
            <div class="chat" v-for="chat in chats">{{ chat.message }}</div>
        </div>
        <div>
            <input type="text" v-model="ipt">
            <button @click="send">发送</button>
        </div>
    </div>
</template>

<style scoped lang="scss">
.chat {
    background-color: gray;
    padding: .5rem;
    margin: 5px;
}
</style>

9、Vue文件风格

9.1、template

<script setup lang="ts">

</script>

<template>

</template>

<style scoped lang="scss">

</style>

9.2、tsx

待补。。。

9.3、h函数

<script setup lang="ts">
let data = reactive<{
    id: number,
    name: string
    address: string,
    operate: () => {}
}[]>([
    {
        id: 1,
        name: 'zhangsan',
        address: 'shanghai',
    },
    {
        id: 1,
        name: 'lisi',
        address: 'shanghai',
    },
    {
        id: 1,
        name: 'wangwu',
        address: 'shanghai',
    },
    {
        id: 1,
        name: 'zhaoliu',
        address: 'shanghai',
    }
])

const btn = (props, ctx) => {
    // props:组件上属性,ctx:组件样式、插槽、emit
    console.log(props, ctx);
    return h('button', {
        // 样式
        style: {
            color: props.type === 'update' ? 'green' : 'red'
        },
        // 事件
        onClick: () => {
            console.log('click');
        }
    }, ctx.slots.default())
}
</script>

<template>
    <table>
        <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>address</th>
            <th>operate</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in data">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.address }}</td>
            <td>
                <btn type="update">编辑</btn>
                <btn type="delete">删除</btn>
            </td>
        </tr>
        </tbody>

    </table>
</template>

<style scoped lang="scss">

</style>

10、环境变量

10.1、配置环境变量

环境变量的值必须以 VITE_ 开头

1、.env.development
VITE_APP_BASE_URL='/development'
2、.env.production
VITE_APP_BASE_URL='/production'

10.2、添加TS声明

interface ImportMetaEnv {
    readonly VITE_APP_BASE_URL: string
}

interface ImportMeta {
    readonly env: ImportMetaEnv
}

10.3、配置启动命令

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --mode development",
    "prod": "vite --mode production",
    "build": "vue-tsc && vite build --mode production",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.4",
    "vue-router": "4"
  },
  "devDependencies": {
    "@types/node": "^20.4.5",
    "@vitejs/plugin-vue": "^4.2.3",
    "sass": "^1.64.1",
    "typescript": "^5.0.2",
    "unplugin-auto-import": "^0.16.6",
    "unplugin-vue-components": "^0.25.1",
    "vite": "^4.4.5",
    "vue-tsc": "^1.8.5"
  }
}

11、Proxy

11.1、后端接口

@RestController
public class HelloWorldController {
    @RequestMapping("/")
    public String hello() {
        return "<h1>Hello world!</h1>";
    }
}

11.2、vite.config.ts

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// 自动导入vue中ref、reactive、watch等
import AutoImport from "unplugin-auto-import/vite"
// 自动导入ui组件
import Components from 'unplugin-vue-components/vite';

// https://vitejs.dev/config/
export default defineConfig({
    define: {
        // 关闭Vue2 Options Api
        __VUE_OPTIONS_API__: false
    },
    plugins: [
        vue(),
        AutoImport({
            // 在组件中不用再导入ref、reactive、watch等
            imports: ['vue', 'vue-router'],
            // 声明文件存放的位置,会自动生成,无需自己维护
            dts: "src/auto-import.d.ts",
        }),
        Components({
            // 引入组件的存放的位置,包括自定义组件
            dts: "src/components.d.ts",
        }),
    ],
    resolve: {
        // 配置路径别名
        alias: {
            "@": path.resolve(__dirname, "./src"),
        },
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "@/style/variables.scss";`
            }
        }
    },
    server: {
        // dev环境解决跨域
        proxy: {
            '/api': {
                target: 'http://localhost:8080/',
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    }
})

11.3、使用

<script setup lang="ts">
fetch('/api')
</script>

<template>
    <h1>Hello world!</h1>
</template>

<style scoped lang="scss">

</style>

12、Pinna

Pinna用于替代Vuex作为全局状态管理

  • 完整的ts支持
  • 轻量
  • 支持同步和异步

12.1、基础使用

1、main.ts
import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";
import {createPinia} from "pinia";

// pinia
let store = createPinia()

let app = createApp(App)
app.config.globalProperties.$author = 'xumeng03'
// pinia
app.use(router).use(store).mount('#app')
2、store
import {defineStore} from "pinia";

const enum storeName {
    xumeng03 = 'xumeng03'
}

export const useXumeng03Store = defineStore(storeName.xumeng03, {
    state: () => {
        return {
            id: 1,
            name: 'xumeng03'
        }
    },
})
3、使用
<script setup lang="ts">
import {useXumeng03Store} from "./store";

const xumeng03 = useXumeng03Store()
</script>

<template>
    <h1>{{ xumeng03.id }}--{{ xumeng03.name }}</h1>
</template>

<style scoped lang="scss">

</style>

12.2、state

1、直接修改
<script setup lang="ts">
import {useXumeng03Store} from "./store";

const xumeng03 = useXumeng03Store()

const idAdd = () => {
    xumeng03.id++
}
</script>

<template>
    <h1 @click="idAdd">{{ xumeng03.id }}--{{ xumeng03.name }}</h1>
</template>

<style scoped lang="scss">

</style>
2、$patch
<script setup lang="ts">
import {useXumeng03Store} from "./store";

const xumeng03 = useXumeng03Store()

const idAdd = () => {

    // 批量修改
    // xumeng03.$patch({
    //     id: 10,
    //     name: 'Xumeng03'
    // })

    // 函数写法
    xumeng03.$patch((state) => {
        state.id = 100
        state.name = xumeng03.name.toUpperCase()
    })
}
</script>

<template>
    <h1 @click="idAdd">{{ xumeng03.id }}--{{ xumeng03.name }}</h1>
</template>

<style scoped lang="scss">

</style>
3、action

定义actions

import {defineStore} from "pinia";

const enum storeName {
    xumeng03 = 'xumeng03'
}

export const useXumeng03Store = defineStore(storeName.xumeng03, {
    state: () => {
        return {
            id: 1,
            name: 'xumeng03'
        }
    },
    actions: {
        setId(id: number) {
            this.id = id
        }
    }
})

使用

<script setup lang="ts">
import {useXumeng03Store} from "./store";

const xumeng03 = useXumeng03Store()

const idAdd = () => {
    // action
    xumeng03.setId(100)
}
</script>

<template>
    <h1 @click="idAdd">{{ xumeng03.id }}--{{ xumeng03.name }}</h1>
</template>

<style scoped lang="scss">

</style>

12.3、storeToRefs

用于解决state解构失去响应式

<script setup lang="ts">
import {useXumeng03Store} from "./store";
import {storeToRefs} from "pinia";

const xumeng03 = useXumeng03Store()
// 直接解构无响应式
// let {id, name} = xumeng03
let {id, name} = storeToRefs(xumeng03)

const idAdd = () => {
    xumeng03.id++
    // id.value++
}
</script>

<template>
    <h1 @click="idAdd">{{ id }}--{{ name }}</h1>
</template>

<style scoped lang="scss">

</style>

12.4、actions

定义actions

import {defineStore} from "pinia";

const enum storeName {
    xumeng03 = 'xumeng03'
}

const getName = (): Promise<{
    id: number,
    name: string
}> => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({
                id: 200,
                name: '眼眸'
            })
        }, 2000)
    })
}
export const useXumeng03Store = defineStore(storeName.xumeng03, {
    state: () => {
        return {
            id: 1,
            name: 'xumeng03'
        }
    },

    actions: {
        // 同步方法
        setId(id: number) {
            this.id = id
            // 方法间可相互调用
            this.setName()
        },
        // 异步方法
        async setName() {
            const result = await getName()
            this.name = result.name
            // 方法间可相互调用
            // this.setId(result.id)
        }
    }
})

使用

<script setup lang="ts">
import {useXumeng03Store} from "./store";
import {storeToRefs} from "pinia";

const xumeng03 = useXumeng03Store()

const idAdd = () => {
    // xumeng03.setId(2)
    xumeng03.setName()
}
</script>

<template>
    <h1 @click="idAdd">{{ xumeng03.id }}--{{ xumeng03.name }}</h1>
</template>

<style scoped lang="scss">

</style>

12.5、getter

定义getters

import {defineStore} from "pinia";

const enum storeName {
    xumeng03 = 'xumeng03'
}

const getName = (): Promise<{
    id: number,
    name: string
}> => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({
                id: 200,
                name: '眼眸'
            })
        }, 2000)
    })
}
export const useXumeng03Store = defineStore(storeName.xumeng03, {
    state: () => {
        return {
            id: 1,
            name: 'xumeng03'
        }
    },
    getters: {
        decorateName(): string {
            return `$${this.name}`
        }
    },
    actions: {
        // 同步方法
        setId(id: number) {
            this.id = id
            // 方法间可相互调用
            this.setName()
        },
        // 异步方法
        async setName() {
            const result = await getName()
            this.name = result.name
            // 方法间可相互调用
            // this.setId(result.id)
        }
    }
})

使用

<script setup lang="ts">
import {useXumeng03Store} from "./store";
import {storeToRefs} from "pinia";

const xumeng03 = useXumeng03Store()

const idAdd = () => {
    // xumeng03.setId(2)
    xumeng03.setName()
}
</script>

<template>
    <h1 @click="idAdd">{{ xumeng03.id }}--{{ xumeng03.name }}--{{ xumeng03.decorateName }}</h1>
</template>

<style scoped lang="scss">

</style>

12.6、API

1、$reset
<script setup lang="ts">
import {useXumeng03Store} from "./store";
import {storeToRefs} from "pinia";

const xumeng03 = useXumeng03Store()

const idAdd = () => {
    // xumeng03.setId(2)
    xumeng03.setName()
}
const reset = () => {
    // xumeng03.setId(2)
    xumeng03.$reset()
}
</script>

<template>
    <h1 @click="idAdd">{{ xumeng03.id }}--{{ xumeng03.name }}--{{ xumeng03.decorateName }}</h1>
    <div @click="reset">
        reset
    </div>
</template>

<style scoped lang="scss">

</style>
2、$subscribe

订阅state的变化

<script setup lang="ts">
import {useXumeng03Store} from "./store";

const xumeng03 = useXumeng03Store()

const idAdd = () => {
    // xumeng03.setId(2)
    xumeng03.setName()
}
xumeng03.$subscribe((args, state) => {
    // args:记录了变化前后值
    console.log(args);
    // state:改变后的state值
    console.log(state);
})
</script>

<template>
    <h1 @click="idAdd">{{ xumeng03.id }}--{{ xumeng03.name }}--{{ xumeng03.decorateName }}</h1>
</template>

<style scoped lang="scss">

</style>
3、$onAction
<script setup lang="ts">
import {useXumeng03Store} from "./store";

const xumeng03 = useXumeng03Store()

const idAdd = () => {
    // xumeng03.setId(2)
    xumeng03.setName()
}
xumeng03.$onAction((args) => {
    // args: 调用action相关信息
    console.log(args);
    // action调用完毕的回调
    args.after(() => {
        console.log('action调用完毕');
    })
})
</script>

<template>
    <h1 @click="idAdd">{{ xumeng03.id }}--{{ xumeng03.name }}--{{ xumeng03.decorateName }}</h1>
</template>

<style scoped lang="scss">

</style>

12.7、持久化

在状态改变时将其同步到浏览器的存储中,如 cookielocalStorage、sessionStorage

1、persist.ts
import {PiniaPluginContext} from 'pinia'

export const piniaPersist = (context: PiniaPluginContext) => {
    console.log(context);
    const {store} = context
    const localstore = getLocalStorage(`store-${store.$id}`)
    store.$subscribe(() => {
        // console.log('store change')
        setLocalStorage(`store-${store.$id}`, toRaw(store.$state))
    })
    return {
        ...localstore
    }
}

const setLocalStorage = (key: string, value: object) => {
    // console.log(key, value)
    localStorage.setItem(key, JSON.stringify(value))
}

const getLocalStorage = (key: string) => {
    const store = localStorage.getItem(key)
    return store ? JSON.parse(store) : {};
}
2、store/index.ts
import {createPinia, defineStore} from "pinia";
import {piniaPersist} from './persist'

const enum storeName {
    xumeng03 = 'xumeng03',
    xumeng04 = 'xumeng04'
}

const getName = (): Promise<{
    id: number,
    name: string
}> => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({
                id: 200,
                name: '眼眸'
            })
        }, 2000)
    })
}
export const useXumeng03Store = defineStore(storeName.xumeng03, {
    state: () => {
        return {
            id: 3,
            name: 'xumeng03'
        }
    },
    getters: {
        decorateName(): string {
            return `$${this.name}`
        }
    },
    actions: {
        // 同步方法
        setId(id: number) {
            this.id = id
        },
        // 异步方法
        async setName() {
            const result = await getName()
            this.name = result.name
        }
    }
})

export const useXumeng04Store = defineStore(storeName.xumeng04, {
    state: () => {
        return {
            id: 4,
            name: 'xumeng04'
        }
    },
    getters: {
        decorateName(): string {
            return `$${this.name}`
        }
    },
    actions: {
        // 同步方法
        setId(id: number) {
            this.id = id
        },
        // 异步方法
        async setName() {
            const result = await getName()
            this.name = result.name
        }
    }
})

// pinia
const pinia = createPinia()
// pinia使用piniaPluginPersistedstate
pinia.use(piniaPersist)

export default pinia;
3、main.ts
import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";
import pinia from './store/index.ts'


let app = createApp(App)
app.config.globalProperties.$author = 'xumeng03'

// 使用router、pinia
app.use(router).use(pinia).mount('#app')

13、Router

13.1、基础使用

1、router/index.ts
import {createRouter, createWebHistory, Router, RouteRecordRaw} from "vue-router";
import Home from '../view/Home.vue'

let routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/about',
        name: 'about',
        component: () => import('../view/About.vue')
    },
]

const router: Router = createRouter({
    history: createWebHistory(),
    routes
})

export default router
2、main.ts
import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router";
import pinia from './store/index.ts'


let app = createApp(App)
app.config.globalProperties.$author = 'xumeng03'

// 使用router、pinia
app.use(router).use(pinia).mount('#app')
3、使用
<script setup lang="ts">

</script>

<template>
    <nav>
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
</template>

<style scoped lang="scss">

</style>

13.2、路由跳转方式

1、path
<script setup lang="ts">

</script>

<template>
    <nav>
        <!--path形式-->
        <router-link to="/">Home</router-link>
        |
        <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
</template>

<style scoped lang="scss">

</style>
2、name
<script setup lang="ts">

</script>

<template>
    <nav>
        <!--name形式-->
        <router-link :to="{name:'home'}">Home</router-link>
        |
        <router-link :to="{name:'about'}">About</router-link>
    </nav>
    <router-view/>
</template>

<style scoped lang="scss">

</style>
3、ts
<script setup lang="ts">
const router = useRouter()
const to = (route: string) => {
    // path
    // router.push(route)
    router.push({
        path: route
    })

    // name
    // router.push({
    //     name: route
    // })
}
</script>

<template>
    <nav>
        <!--path-->
        <button @click="to('/')">home</button>
        <button @click="to('/about')">about</button>

        <!--name-->
        <!--<button @click="to('home')">home</button>-->
        <!--<button @click="to('about')">about</button>-->
    </nav>
    <router-view/>
</template>

<style scoped lang="scss">

</style>

13.3、路由传参

1、query传参

query传参跳转时可自由选择name、path,参数会拼接在路径上,刷新不会消失

App.vue

<script setup lang="ts">
const router = useRouter()

// ts方式取消记录
const to = (route: string, message: string | null) => {
    if (message) {
        router.push({
            name: route,
            query: {
                message
            }
        })
    } else {
        router.push({
            name: route,
        })
    }
}
</script>

<template>
    <nav>
        <!--ts方式-->
        <button @click="to('home', null)">home</button>
        <button @click="to('about', '222')">about</button>

        <!--router-link方式-->
        <router-link replace :to="{name:'home'}">Home</router-link>
        |
        <router-link replace :to="{name:'about', query: { message: '222' }}">About</router-link>
    </nav>
    <router-view/>
</template>

<style scoped lang="scss">

</style>

home.vue

<script setup lang="ts">

</script>

<template>
    <h1>This is a home page</h1>
</template>

<style scoped lang="scss">

</style>

About.vue

<script setup lang="ts">
// 注意取值时是useRoute(),操作路由的时候才是useRouter()
const router = useRoute()
</script>

<template>
    <h1>This is a about page</h1>
    <p>{{ router.query.message}}</p>
</template>

<style scoped lang="scss">

</style>
2、params传参

注意:params在新版仅支持在路由动态参数时使用

router/index.ts

import {createRouter, createWebHistory, Router, RouteRecordRaw} from "vue-router";
import Home from '../view/Home.vue'

let routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/about/:message',
        name: 'about',
        component: () => import('../view/About.vue')
    },
]

const router: Router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

App.vue

<script setup lang="ts">
const router = useRouter()

// ts方式取消记录
const to = (route: string, message: string | null) => {
    if (message) {
        router.push({
            name: route,
            params: {
                message
            }
        })
    } else {
        router.push({
            name: route,
        })
    }
}
</script>

<template>
    <nav>
        <!--ts方式-->
        <button @click="to('home', null)">home</button>
        <button @click="to('about', '222')">about</button>

        <!--router-link方式-->
        <router-link replace :to="{name:'home'}">Home</router-link>
        |
        <router-link replace :to="{name:'about', params: { message: '222'}}">About</router-link>
    </nav>
    <router-view/>
</template>

<style scoped lang="scss">

</style>

13.3、路由记录

1、路由前进后退

也可通过浏览器前进后退按钮来前进后退

<script setup lang="ts">
const router = useRouter()
const to = (route: string) => {
    router.push({
        name: route
    })
}
const prev = (route: string) => {
    // router.go(-1)
    router.back()
}
const next = (route: string) => {
    router.go(1)
}
</script>

<template>
    <nav>
        <!--path-->
        <button @click="prev">prev</button>
        <button @click="next">next</button>

        <button @click="to('home')">home</button>
        <button @click="to('about')">about</button>
    </nav>
    <router-view/>
</template>

<style scoped lang="scss">

</style>
2、取消路由记录
<script setup lang="ts">
const router = useRouter()

// ts方式取消记录
const to = (route: string) => {
    // router.push({
    //     name: route
    // })
    router.replace({
        name: route
    })
}
const prev = (route: string) => {
    // router.go(-1)
    router.back()
}
const next = (route: string) => {
    router.go(1)
}
</script>

<template>
    <nav>
        <!--ts取消记录-->
        <button @click="prev">prev</button>
        <button @click="next">next</button>

        <button @click="to('home')">home</button>
        <button @click="to('about')">about</button>

        <!--router-link取消记录-->
        <router-link replace :to="{name:'home'}">Home</router-link>
        |
        <router-link replace :to="{name:'about'}">About</router-link>
    </nav>
    <router-view/>
</template>

<style scoped lang="scss">

</style>

13.4、路由嵌套

1、router/index.ts
import {createRouter, createWebHistory, Router, RouteRecordRaw} from "vue-router";
import Home from '../view/Home.vue'

let routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/about/:message',
        name: 'about',
        component: () => import('../view/About.vue')
    },
    {
        path: '/mine',
        component: () => import('../view/Mine.vue'),
        children: [
            {
                path: '',
                name: 'mine1',
                component: () => import('../components/Mine1.vue')
            },
            {
                path: 'mine2',
                name: 'mine2',
                component: () => import('../components/Mine2.vue')
            },
        ]
    },
]

const router: Router = createRouter({
    history: createWebHistory(),
    routes
})

export default router
2、App.vue
<script setup lang="ts">
const router = useRouter()

// ts方式取消记录
const to = (route: string, message: string | null) => {
    if (message) {
        router.push({
            name: route,
            params: {
                message
            }
        })
    } else {
        router.push({
            name: route,
        })
    }
}
</script>

<template>
    <nav>
        <!--ts方式-->
        <button @click="to('home', null)">home</button>
        <button @click="to('mine1', '222')">mine</button>
        <button @click="to('about', '222')">about</button>

        <!--router-link方式-->
        <router-link replace :to="{name:'home'}">Home</router-link>
        |
        <router-link replace :to="{name:'mine1'}">Mine</router-link>
        |
        <router-link replace :to="{name:'about', params: { message: '222'}}">About</router-link>
    </nav>
    <router-view/>
</template>

<style scoped lang="scss">

</style>
3、Mine.vue
<script setup lang="ts">
const router = useRouter()
const to = (route: string) => {
    // name形式
    // router.push({
    //     name: route,
    // })

    // path形式
    router.push({
        path: route,
    })
}
</script>

<template>
    <h1>个人中心</h1>
    <div>
        <!--name形式-->
        <!--ts方式-->
        <!--<button @click="to('mine1')">mine1</button>-->
        <!--<button @click="to('mine2')">mine2</button>-->
        
        <!--&lt;!&ndash;router-link方式&ndash;&gt;-->
        <!--<router-link replace :to="{name:'mine1'}">mine1</router-link>-->
        <!--|-->
        <!--<router-link replace :to="{name:'mine2'}">mine2</router-link>-->

        <!--path形式-->
        <!--ts方式-->
        <button @click="to('/mine')">mine1</button>
        <button @click="to('/mine/mine2')">mine2</button>

        <!--router-link方式-->
        <router-link replace to="/mine">mine1</router-link>
        |
        <router-link replace to="/mine/mine2">mine2</router-link>
    </div>
    <router-view/>
</template>

<style scoped lang="scss">

</style>

13.5、路由重定向

1、router/index.ts
import {createRouter, createWebHistory, Router, RouteRecordRaw} from "vue-router";
import Home from '../view/Home.vue'

let routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/about/:message',
        name: 'about',
        component: () => import('../view/About.vue')
    },
    {
        path: '/mine',
        name: 'mine',
        // 重定向方式1
        // redirect: {
        //     // path: '/mine1'
        //     name: 'mine1'
        // }

        // 重定向方式2
        // redirect: (to) => {
        //     console.log(to);
        //     return "/mine1"
        // }
        // 重定向方式3
        redirect: (to) => {
            console.log(to);
            return {
                path: '/mine1',
                query: to.query
            }
        }
    },
    {
        path: '/mine1',
        name: 'mine1',
        component: () => import('../components/Mine1.vue')
    },
    {
        path: '/mine2',
        name: 'mine2',
        component: () => import('../components/Mine2.vue')
    },
]

const router: Router = createRouter({
    history: createWebHistory(),
    routes
})

export default router
2、使用
<script setup lang="ts">
const router = useRouter()

// ts方式取消记录
const to = (route: string, message: string | null) => {
    if (message) {
        router.push({
            name: route,
            params: {
                message
            }
        })
    } else {
        router.push({
            name: route,
        })
    }
}
</script>

<template>
    <nav>
        <!--ts方式-->
        <button @click="to('home', null)">home</button>
        <button @click="to('mine', null)">mine</button>
        <button @click="to('about', '222')">about</button>

        <!--router-link方式-->
        <router-link replace :to="{name:'home'}">Home</router-link>
        |
        <router-link replace :to="{name:'mine'}">Mine</router-link>
        |
        <router-link replace :to="{name:'about', params: { message: '222'}}">About</router-link>
    </nav>
    <router-view/>
</template>

<style scoped lang="scss">

</style>

13.6、路由别名

import {createRouter, createWebHistory, Router, RouteRecordRaw} from "vue-router";
import Home from '../view/Home.vue'

let routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        alias: ['/index', '/root'],
        component: Home
    },
    {
        path: '/about/:message',
        name: 'about',
        component: () => import('../view/About.vue')
    },
    {
        path: '/mine',
        name: 'mine',
        // 重定向方式1
        // redirect: {
        //     // path: '/mine1'
        //     name: 'mine1'
        // }

        // 重定向方式2
        // redirect: (to) => {
        //     console.log(to);
        //     return "/mine1"
        // }
        
        // 重定向方式3
        redirect: (to) => {
            console.log(to);
            return {
                path: '/mine1',
                query: to.query
            }
        }
    },
    {
        path: '/mine1',
        name: 'mine1',
        component: () => import('../components/Mine1.vue')
    },
]

const router: Router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

13.7、导航守卫

1、前置守卫
import {createRouter, createWebHistory, Router, RouteRecordRaw} from "vue-router";
import Home from '../view/Home.vue'

let routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        alias: ['/index', '/root'],
        component: Home
    },
    {
        path: '/about/:message',
        name: 'about',
        component: () => import('../view/About.vue')
    },
    {
        path: '/mine',
        name: 'mine',
        redirect: {
            // path: '/mine1'
            name: 'mine1'
        }
    },
    {
        path: '/mine1',
        name: 'mine1',
        component: () => import('../components/Mine1.vue')
    },
]

const router: Router = createRouter({
    history: createWebHistory(),
    routes
})

// to: 去哪个路由
// from: 从哪个路由来
// next: 放行,可传入指定path
router.beforeEach((to, from, next) => {
    console.log(to, from, next);
    next()
})

export default router
2、后置守卫
import {createRouter, createWebHistory, Router, RouteRecordRaw} from "vue-router";
import Home from '../view/Home.vue'

let routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        alias: ['/index', '/root'],
        component: Home
    },
    {
        path: '/about/:message',
        name: 'about',
        component: () => import('../view/About.vue')
    },
    {
        path: '/mine',
        name: 'mine',
        redirect: {
            // path: '/mine1'
            name: 'mine1'
        }
    },
    {
        path: '/mine1',
        name: 'mine1',
        component: () => import('../components/Mine1.vue')
    },
]

const router: Router = createRouter({
    history: createWebHistory(),
    routes
})

// to: 去哪个路由
// from: 从哪个路由来
// next: 放行,可传入指定path
router.beforeEach((to, from, next) => {
    console.log(to, from, next);
    next()
})

// to: 去哪个路由
// from: 从哪个路由来
router.afterEach((to, from) => {
    console.log(to, from);
})

export default router

13.8、路由元信息

1、router/index.ts
import {createRouter, createWebHistory, Router, RouteRecordRaw} from "vue-router";
import Home from '../view/Home.vue'

// declare module 'vue-router' {
//     interface RouteMeta {
//         title: string
//     }
// }

let routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        alias: ['/index', '/root'],
        meta: {
            title: 'home'
        },
        component: Home
    },
    {
        path: '/about/:message',
        name: 'about',
        meta: {
            title: 'about'
        },
        component: () => import('../view/About.vue')
    },
    {
        path: '/mine',
        name: 'mine',
        redirect: {
            // path: '/mine1'
            name: 'mine1'
        }
    },
    {
        path: '/mine1',
        name: 'mine1',
        component: () => import('../components/Mine1.vue')
    },
]

const router: Router = createRouter({
    history: createWebHistory(),
    routes
})

// to: 去哪个路由
// from: 从哪个路由来
// next: 放行,可传入指定path
router.beforeEach((to, from, next) => {
    console.log(to, from, next);
    document.title = to.meta.title
    next()
})

// to: 去哪个路由
// from: 从哪个路由来
router.afterEach((to, from) => {
    console.log(to, from);
})

export default router
2、声明文件
declare module 'vue-router' {
    interface RouteMeta {
        title: string
    }
}

13.9、路由过渡

<script setup lang="ts">
const router = useRouter()

// ts方式取消记录
const to = (route: string) => {
    router.push({
        name: route
    })
}
</script>

<template>
    <nav>
        <!--ts方式-->
        <button @click="to('home')">home</button>
        <button @click="to('mine')">mine</button>
        <button @click="to('about')">about</button>

        <!--router-link方式-->
        <router-link replace :to="{name:'home'}">Home</router-link>
        |
        <router-link replace :to="{name:'mine'}">Mine</router-link>
        |
        <router-link replace :to="{name:'about'}">About</router-link>
    </nav>
    <router-view #default="{route, Component}">
        <transition name="v">
            <component :is="Component"></component>
        </transition>
    </router-view>
</template>

<style scoped lang="scss">
.v-enter-active, .v-leave-active {
    transition: all 0.5s;
}

.v-enter-from, .v-leave-to {
    transform: translateY(-20px);
    opacity: 0;
}

.v-enter-to, .v-leave-from {
    transition: all 0.5s;
}
</style>

13.10、滚动行为

import {createRouter, createWebHistory, Router, RouteRecordRaw} from "vue-router";
import Home from '../view/Home.vue'

// declare module 'vue-router' {
//     interface RouteMeta {
//         title: string
//     }
// }

let routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        alias: ['/index', '/root'],
        meta: {
            title: 'home'
        },
        component: Home
    },
    {
        path: '/about',
        name: 'about',
        meta: {
            title: 'about'
        },
        component: () => import('../view/About.vue')
    },
    {
        path: '/mine',
        name: 'mine',
        redirect: {
            // path: '/mine1'
            name: 'mine1'
        }
    },
    {
        path: '/mine1',
        name: 'mine1',
        component: () => import('../components/Mine1.vue')
    },
]

const router: Router = createRouter({
    history: createWebHistory(),
    routes,
    scrollBehavior: (to, from, savedPosition) => {
        console.log(to, from);
        if (savedPosition) {
            return savedPosition
        } else {
            return {
                top: 0
            }
        }
    }
})

// to: 去哪个路由
// from: 从哪个路由来
// next: 放行,可传入指定path
router.beforeEach((to, from, next) => {
    console.log(to, from);
    document.title = to.meta.title
    next()
})

// to: 去哪个路由
// from: 从哪个路由来
router.afterEach((to, from) => {
    console.log(to, from);
})

export default router

13.11、动态路由

import {createRouter, createWebHistory, Router, RouteRecordRaw} from "vue-router";
import Home from '../view/Home.vue'

// declare module 'vue-router' {
//     interface RouteMeta {
//         title: string
//     }
// }

let routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        meta: {
            title: 'home'
        },
        component: Home
    },
    {
        path: '/about',
        name: 'about',
        meta: {
            title: 'about'
        },
        component: () => import('@/view/About.vue')
    },
]

const router: Router = createRouter({
    history: createWebHistory(),
    routes,
    scrollBehavior: (to, from, savedPosition) => {
        console.log(to, from);
        if (savedPosition) {
            return savedPosition
        } else {
            return {
                top: 0
            }
        }
    }
})

// to: 去哪个路由
// from: 从哪个路由来
// next: 放行,可传入指定path
router.beforeEach((to, from, next) => {
    console.log(to, from);
    document.title = to.meta.title
    next()
})

// to: 去哪个路由
// from: 从哪个路由来
router.afterEach((to, from) => {
    console.log(to, from);
})

// 动态路由
const dynamicRoutes = [
    {
        path: '/mine1',
        name: 'mine1',
        component: 'Mine1'
    },
    {
        path: '/mine2',
        name: 'mine2',
        component: 'Mine2'
    },
]

dynamicRoutes.forEach((item) => {
    router.addRoute({
        path: item.path,
        name: item.name,
        component: () => import(`@/view/${item.component}.vue`)
    })
    console.log(router.getRoutes())
})

export default router

14、Eslint

14.1、初始化eslint

1、选择模式(To check syntax and find problems)
PS D:\WebstromProject\yanyang> npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
? How would you like to use ESLint? ... 
  To check syntax only
> To check syntax and find problems
  To check syntax, find problems, and enforce code style
2、选择语言(JavaScript modules (import/export))
PS D:\WebstromProject\yanyang> npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
√ How would you like to use ESLint? · problems
? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
3、选择框架(Vue.js)
PS D:\WebstromProject\yanyang> npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
? Which framework does your project use? ...
  React
> Vue.js
  None of these
4、是否使用ts(Yes)
PS D:\WebstromProject\yanyang> npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
? Does your project use TypeScript? » No / Yes
5、运行环境(Browser)
PS D:\WebstromProject\yanyang> npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node
6、配置文件格式(JavaScript)
PS D:\WebstromProject\yanyang> npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON
7、是否现在安装依赖(Yes)
PS D:\WebstromProject\yanyang> npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
? Would you like to install them now? » No / Yes
8、包管理器(yarn)
PS D:\WebstromProject\yanyang> npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
√ Would you like to install them now? · No / Yes
? Which package manager do you want to use? ...
  npm
> yarn
  pnpm

等待安装完成即可

14.2、.eslintrc.cjs

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:vue/vue3-essential",
        'plugin:prettier/recommended',
        'eslint-config-prettier'
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "vue"
    ],
    "rules": {
    }
}

14.3、package.json

{
  "name": "yanyang",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    // 格式化命令
    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
  },
  "dependencies": {
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^6.2.1",
    "@typescript-eslint/parser": "^6.2.1",
    "@vitejs/plugin-vue": "^4.2.3",
    "eslint": "^8.46.0",
    "eslint-plugin-vue": "^9.16.1",
    "prettier": "^3.0.1",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vite-plugin-eslint": "^1.8.1",
    "vue-tsc": "^1.8.5"
  }
}

15.4、webstrom配置

会自动匹配.eslintrc.*文件作为配置文件
在这里插入图片描述

15、Prettier

15.1、.prettierrc.cjs

module.exports = {
    printWidth: 80, // 单行长度
    tabWidth: 4, // 缩进长度
    useTabs: false, // 使用空格代替tab缩进
    semi: false, // 句末使用分号
    singleQuote: true, // 使用单引号
}

15.2、.eslintrc.cjs

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:vue/vue3-essential",
        // 添加prettier配置
        'plugin:prettier/recommended',
        'eslint-config-prettier'
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "vue"
    ],
    "rules": {
    }
}

15.3、package.json

{
  "name": "yanyang",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.ts,.tsx,.js,.jsx . --fix",
    // 格式化命令
    "prettier": "prettier --write ./**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}"
  },
  "dependencies": {
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^6.2.1",
    "@typescript-eslint/parser": "^6.2.1",
    "@vitejs/plugin-vue": "^4.2.3",
    "eslint": "^8.46.0",
    "eslint-plugin-vue": "^9.16.1",
    "prettier": "^3.0.1",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vite-plugin-eslint": "^1.8.1",
    "vue-tsc": "^1.8.5"
  }
}

15.4、webstrom配置

会自动匹配.prettierrc.*文件作为配置文件
在这里插入图片描述

16、TSX语法

16.1、组件创建方式

1、函数式
// 函数式组件
export default () => <div>Hello TSX!</div>
2、defineComponent
// defineComponent
export default defineComponent({
  render() {
    return <div>Hello TSX!</div>
  },
})
3、defineComponent(setup)
// defineComponent(setup)
export default defineComponent({
  setup(props, ctx) {
    console.log(props, ctx)
    return () => {
      return <div>Hello TSX!</div>
    }
  },
})

16.2、修饰符

tsx取值需自行加value

import { withModifiers } from 'vue'

export default defineComponent({
  setup(props, ctx) {
    console.log(props, ctx)
    const count = ref(0)
    const add = () => {
      count.value++
    }
    return () => {
      return (
        <div onClick={withModifiers(add, ['self'])}>Hello {count.value}!</div>
      )
    }
  },
})

16.3、v-model

import { withModifiers } from 'vue'

export default defineComponent({
  setup(props, ctx) {
    console.log(props, ctx)
    const count = ref(0)
    const add = () => {
      count.value++
    }
    return () => {
      return (
        <div>
          <div onClick={withModifiers(add, ['self'])}>Hello {count.value}!</div>
          <input type="texe" v-model={count.value} />
        </div>
      )
    }
  },
})

16.4、v-if

import { withModifiers } from 'vue'

export default defineComponent({
  setup(props, ctx) {
    console.log(props, ctx)
    const count = ref(0)
    const add = () => {
      count.value++
    }
    return () => {
      return (
        <div>
          <div onClick={withModifiers(add, ['self'])}>Hello {count.value}!</div>
          <input type="texe" v-model={count.value} />
          <div>
            {count.value % 2 === 0 ? <span>偶数</span> : <span>奇数</span>}
          </div>
        </div>
      )
    }
  },
})

16.5、v-for

import { withModifiers } from 'vue'

export default defineComponent({
  setup(props, ctx) {
    console.log(props, ctx)
    const count = ref(0)
    const add = () => {
      count.value++
    }
    const users = reactive([
      {
        name: 'xumeng03',
      },
      {
        name: '眼眸',
      },
    ])
    return () => {
      return (
        <div>
          <div onClick={withModifiers(add, ['self'])}>Hello {count.value}!</div>
          <input type="texe" v-model={count.value} />
          <div>
            {count.value % 2 === 0 ? <span>偶数</span> : <span>奇数</span>}
          </div>
          <ul>
            {users.map((item) => (
              <li>{item.name}</li>
            ))}
          </ul>
        </div>
      )
    }
  },
})

16.6、指令

import { withModifiers } from 'vue'

export default defineComponent({
  directives: {
    foucs: {
      mounted(el) {
        el.focus()
      },
    },
  },
  setup(props, ctx) {
    console.log(props, ctx)
    const count = ref(0)
    const add = () => {
      count.value++
    }
    const users = reactive([
      {
        name: 'xumeng03',
      },
      {
        name: '眼眸',
      },
    ])
    return () => {
      return (
        <div>
          <div onClick={withModifiers(add, ['self'])}>Hello {count.value}!</div>
          <input v-foucs type="texe" v-model={count.value} />
          <div>
            {count.value % 2 === 0 ? <span>偶数</span> : <span>奇数</span>}
          </div>
          <ul>
            {users.map((item) => (
              <li>{item.name}</li>
            ))}
          </ul>
        </div>
      )
    }
  },
})

16.7、slot

import { ref, defineComponent, withModifiers } from 'vue'

export default defineComponent({
  setup(props, { slots }) {
    console.log(props, slots)
    const count = ref(0)
    const add = () => {
      count.value++
    }
    return () => {
      return (
        <div>
          <div onClick={withModifiers(add, ['self'])}>Hello {count.value}!</div>
          <div>{slots.default ? slots.default() : '插槽无内容'}</div>
          <div>{slots.remark ? slots.remark() : '插槽无内容'}</div>
        </div>
      )
    }
  },
})
<script setup lang="ts">
import HelloTSX from './components/HelloTSX.tsx'
</script>

<template>
  <HelloTSX>
    <template #default> default插槽测试 </template>
    <template #remark> remark插槽测试 </template>
  </HelloTSX>
</template>

<style scoped>

</style>

16.8、emit

import { ref, defineComponent, withModifiers } from 'vue'

export default defineComponent({
  emits: ['click'],
  setup(props, { slots, emit }) {
    console.log(props, slots, emit)
    const count = ref(0)
    const add = () => {
      emit('click')
    }
    return () => {
      return (
        <div>
          <div onClick={withModifiers(add, ['self'])}>Hello {count.value}!</div>
        </div>
      )
    }
  },
})
<script setup lang="ts">
import HelloTSX from './components/HelloTSX.tsx'
</script>

<template>
  <HelloTSX @click="() => console.log('HelloTSX Click')"> </HelloTSX>
</template>

<style scoped>

</style>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/5323.html
标签
typescript
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!