項目中目錄別名的配置
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>