常见问题

项目启动报错

解决办法：查看 node 和 pnpm 版本 ( node 16.18.0 版本及以上、pnpm 6 版本及以上) 删除 node_modules 重新执行 pnpm install 命令

项目出现报错 Access is denied（windows 常见）

解决办法：请遵循平台要求，安装对应的 node 和 pnpm 版本 ( node 16 版本及以上、pnpm 6 版本及以上)

项目首次启动 cmd 中出现错误 Cannot assign to "xxx" because it is a constant

声明对象时使用了 const 但是又更改了它的值，使用 let 代替它

项目警告 Invalid watch source

vue3 watch 函数必须监听的是 getter/effect function, a ref, a reactive object, or an array of these types 举个🌰

点击查看

<script setup>
import { watch } from 'vue'
const props = defineProps({
  isCollapsed: {
    type: Boolean,
    default: false,
  },
})

// 错误示例
watch(props.isCollapsed, () => {})

// 正确示例
watch(
  () => props.isCollapsed,
  () => {}
)
</script>

vue3 的 <script setup> 写法，虽然会依据它的文件名来自动推断组件名称 name，但这也约束了我们的写法，不算灵活，如何解决？

unplugin-vue-define-options 可以在一个 setup 里加入 name ，很方便。用法如下

<script setup>
defineOptions({
  name: 'ui-menu',
})
</script>

$ref 语法糖不起作用

警告

Vue 3.4 及以上版本中被移除，最新的前端框架中已弃用

响应性语法糖目前默认是关闭状态，需要你显式选择启用。。

官方解答 显式启用

$children 不存在怎么办？

可以在父组件中声明一个数组通过 provide 注入，在子组件中通过 inject 获取后，在 Onmounted中 向数组中添加子组件中的方法或者属性，这样在父组件中就可以获取到子组件中的方法或者属性了。下面是一个🌰

ui-menu.vue

点击查看

<script setup>
import { reactive, provide } from 'vue'
let menuItemSlot = reactive([])
provide('UiMenu', reactive({ menuItemSlot }))
</script>

menu-item.vue

点击查看

<script setup>
import { inject, onMounted, reactive } from 'vue'
import { getUUID } from '@/utils/common'

defineOptions({
  name: 'menu-item',
})

const props = defineProps({
  name: {
    required: true,
    type: String,
  },
})

let active = $ref(false)

const rootMenu = inject('UiMenu')
const id = getUUID()

function handleUpdateActiveName(name) {
  if (props.name === name) {
    active = true
  } else {
    active = false
  }
}

onMounted(() => {
  const menuItem = reactive({
    id: id,
    name: props.name,
    handleUpdateActiveName,
  })
  rootMenu.menuItemSlot.push(menuItem)
})
</script>

通过 createApp 方法创建的组件无法识别全局组件

由于通过 createApp 创建的组件并不是在 APP 下进行渲染，无法使用 APP 下的环境（全局组件，全局指令，原型属性函数）

所以当需要用到其他组件等，需要再次引入

jsx 创建的组件样式不起作用

由于在 vue3 中带有 scoped 的 style 标签只能作用域 vue 文件。所以这里需要用到 CSS Modules

具体例子可参考 src/components/ui-confirm/index.vue

v-model 在 vue3 中的更改

见官方示例

404 路由必要性

如果没有对不存在的路由进行匹配，登录系统会有如下警告：

这是由于系统中的路由是由后端生成的，初始化未登录时还没有在路由列表中生成路由造成的，这时需要由一个 404 路由匹配

此时会有一个问题，登录系统后由于还未动态生成其他路由，系统会跳转到 404 路由，动态添加路由成功后未继续跳转真正需要跳转的路由，需要在 全局路由警卫 中跳转，以下为核心代码

点击查看

/**
 * 由于路由是动态创建的，初次进入时还未载入，这时会进入到404页面中
 * 路由动态添加完成后需要重新载入要进入的路由，
 * 如果是重定向路由，从缓存的路由列表中找到需要重定向进入的路由
 * 如果是指定路由则替换即可
 */
if (to.name === '/') {
  const redirectRoute = accessRoutes.find((row) => row.name === '/')
  next({
    ...redirectRoute,
    replace: true,
  })
} else {
  next({
    path: to.fullPath,
    replace: true,
    query: to.query,
  })
}