vue3项目开发中系列问题

vue3的jsx语法

绑定属性，插值

<com type={type}></com>
<span>{msg}</span>

注册事件

<span onClick={() => hander()}>点击</span>

插槽

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

// 方法一
<com v-slots={{
  otherSlot: () => {
    return (
    	<span>其他slot</span>
    )
  },
  default: <span>默认slot</span>
}}></com>

// 方法二
<com>
{{
  otherSlot: () => {
    return (
    	<span>其他slot</span>
    )
  },
  default: <span>默认slot</span>
}}
</com>

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中根本没有这种错误。

<e-com ref="eCom"></com>

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

pnpm本地调试组件库

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

# 或者单独使用 将 <dir> 目录下的软件包链接到当前目录下的 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
   }
}