vue3项目开发中系列问题

vue3的jsx语法

绑定属性，插值

{msg}

注册事件

 hander()}>点击

插槽

默认插槽可以直接写，非默认插槽就需要特殊写法

// 方法一
 {
    return (
    	其他slot
    )
  },
  default: 默认slot
}}>

// 方法二

{{
  otherSlot: () => {
    return (
    	其他slot
    )
  },
  default: 默认slot
}}

vue3动态路由

vue项目中权限管理的一种方案是动态添加路由。在路由守卫中判断是否初始化路由（没登录状态），是否添加动态路由（已登录状态）。vue2中动态添加完路由直接next()就可以访问到新添加的路由，vue3中却不可以，需要重定向next(to)。

添加路由

router.addRoute(parentRouteName, route)
router.addRoute(route)

删除路由

router.removeRoute(routeName)

报错TypeError: dataOptions.call is not a function

报错的信息含义是data不是一个function，组合式 API中根本没有这种错误。

报错根本原因是ref变量和组件名驼峰命名一样，所有以后声明ref变量需要避免出现问题。

pnpm本地调试组件库

# 将当前工作目录下的软件包链接到全局环境下的 `node_modules` 目录下（软件项目下）
pnpm link --global
# 将全局环境下的 node_modules 目录中的指定的软件包（）链接到当前工作目录下（使用软件项目下）
pnpm link --global <pkg>
# 以上两个命令配合使用

# 或者单独使用 将  目录下的软件包链接到当前目录下的 node_modules 目录下（使用软件项目下）
pnpm link <dir>

outside of Vite serving allow list（调试组件库报错）

报错信息是文件不在vite服务的允许列表。server.fs.allow可以配置哪些文件可以通过 /@fs/ 路径提供服务。

https://cn.vitejs.dev/config/server-options.html#server-fs-allow

暴力一点的处理是

server： {
	fs: {
     // 不限制为工作区 root 路径以外的文件的访问
    	strict: false
   }
}