MCong’s Blog 👋🏼

useID—组件内唯一的id(个人感觉没什么卵用) 使用方法： // app.vue import { useId } from "vue"; const id = useId() console.log('useId======>',id) // 子组件-Hello World import { useId } from 'vue' const id = useId() console.log('useId子组件======>',id) ​ 注意事项 当前实例下的组件唯一的ID，如果有多个实例，则全部都是从0开始 // 当有两个createApp的实例，则每一个useId都会从0开始 createApp({ setup() { onMounted(() => { console.log(useId(),'app-setup中的id') }) return () => h('div','hello World') } }).mount('#app') ​ const app1 = createApp({ setup() { onMounted(() =....

vue3+TS模板推荐配置项 1. 初始化准备 首先要准备node环境，如果未安装请点击node进行下载安装 2.创建项目 方式一（推荐） 脚手架快速创建，勾选依赖的方式 这种方式创建的项目最快捷，因为基本依赖都装好了，根据需要进行安装 npm init vue@latest 方式二 使用官方模板创建vue3项目 这种方式会基于模板创建项目，对于官方模板vue-ts，只带有基础的vue和ts，不带有vue-router、pinia等 npm init vite@latest -- --template vue-ts-demo 以上命令中，"vue-ts"是模板名称 或者使用以下命令然后勾选模板来创建项目 npm init vite@latest 方式三（不推荐） 创建空项目，手动加依赖 这种方式创建的项目甚至连vite.config.ts都没有，如果你善于自己配置其各种配置，可以使用这个 输入以下命令然后勾选第一项Vanilla npm init vite@latest 3.初始化项目模板 插件安装 ESLint格式化工具 ESLint格式化工具:antfu/e....

全局前置守卫 router.beforeEach((to,form,next)=>{ // to：到哪里去（即将要进入的目标-to.path），form:从哪里来（当前导航正要离开的路由） // 可选的第三个参数next vue3中不推荐使用next来表示放行的路径，（了解即可） // 跳转到login页面 || 取消当前导航，如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到路由对应的地址。|| 不做任何处理 在vue3中可以不写，或者写上return true return '/login' || return false || return true }) 全局解析守卫 // 这和 router.beforeEach 类似，因为它在 每次导航时都会触发，但是确保在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被正确调用 // router.beforeResolve 是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置。 // 具体参数及参数用法参考beforeEach r....