项目中目录别名的配置
Vite要求使用绝对路径,所以需要使用到Node中的path模块。
import path from "path";
import { defineConfig } from "vite";
defineConfig({
resolve:{
alias:{
"@":path.resolve(__dirname, "src")
}
}
})
另外,需要注意当在Vue的template中使用别名时需要加上~,例如:
<template>
...
<img src="~assets/img/tabbar/category.svg" alt="" />
...
</template>
Vue3.2 setup的使用
<script setup> 只是组合式API的语法糖,简化了 Composition API 必须 return 的写法。
组件自动注册
<script setup>
import TabBar from "components/tabbar/TabBar.vue";
</script>
<template>
<tab-bar></tab-bar>
</template>
props和emits的使用
props 和 emits 需要使用 defineProps 和 defineEmits 方法来定义,这两个方法不需要引入(import)。
<script setup>
const props = defineProps({
name:{
type:String,
default:''
},
age:Number,
})
// 可通过 props.name 获取 name 的值
console.log(props.name)
</script>
路由的使用
在setup中,不能直接访问 this.$route 和 this.$router。因此,需要使用 useRoute 和 useRouter 来替代。
<script setup>
import { useRouter, useRoute } from "vue-router";
const route = useRoute(); // route 等同于 this.$route
const router = useRouter(); // router 等同于 this.$router
</script>