初次使用Vite + Vue3开发遇到的一些问题


项目中目录别名的配置

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>

参考链接:https://v3.cn.vuejs.org/api/sfc-script-setup.html#基本语法


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM