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、持久化
在状态改变时将其同步到浏览器的存储中，如 cookie、localStorage、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>-->
<!--<!–router-link方式–>-->
<!--<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.*文件作为配置文件
文章来源：https://www.toymoban.com/news/detail-608531.html
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文章来源地址https://www.toymoban.com/news/detail-608531.html
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>
到了这里，关于Vite+Typescript+Vue3学习笔记的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
