Vue3日常杂记

项目场景：使用Vue3中遇到的各种问题

这个项目是个人的Vue3的练习，vue3+vite

---

vue3+vite assets引入图片404错误

下面是问题截图

<el-menu-item index="0">
    <el-image src="../assets/QQyinyue.png"></el-image>
</el-menu-item>

---

原因分析：

vite需要将静态文件放在assets

---

解决方案：

• 第一种方式
  • 适合处理单个链接的资源文件

import logo from '@/assets/QQyinyue.png'

<img :src="logo " />

• 第二种方式
  • 适用于处理多个链接的资源文件

这里我们假设：
工具文件目录： src/util/pub-use.ts

// 获取assets静态资源
export default  const getAssetsFile = (url: string) => {
   return new URL(`../assets/${url}`, import.meta.url).href
}

使用

import useNoe from '@/util/use'
setup () {
  const Noe= useNoe ()
  const getAssetsFile = Noe.getAssetsFile
  return { getAssetsFile }
}

可以包含文件路径

<img :src="getAssetsFile('/assets/QQyinyue.png')" />

插槽的使用误区

之前学过插槽的，以为只是一个出口，一个实现就好了，不过确实也是如此，今天搞了好久才明白

比如在上图中定义了一个插槽，我这是index.vue首页，然后再提供一个实现组件，不过总是不出现内容，找了好久，后面看官方文档，一步步找，才发现，插槽并不能代替使用组件，使用的时候还是需要引入组件
平时使用组件

import FancyButton from './components/FancyButton.vue'

直接就用了，现在我的页面比较复杂了，我需要用插槽拆分下，比如

这个页面，我需要拆分为两个模块，一个是顶部，一个是主体，它们其中细致拆分暂时不说
就顶部栏这个部分，需要拆分为，LOGO，导航栏，搜索，用户信息等，使用组件进行了实现之后，我们需要在首页引用实现的组件，而不是直接在首页设置插槽