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.*文件作为配置文件
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>
复制
