vue3 项目开发过程中遇到的一些问题(持续更新)

1.关于自动引用element-plus：

a. 因为新版本的element-plus/lib/component文件夹下的所有组件都把原来的el前缀去掉了，所以导入babel-plugin-import这个库，进行自动导入会报错，新的版本我比较喜欢用官方推荐的自动导入来完成项目

// a.导入官方推荐库
// 版本过高的话会报错：TypeError: AutoImport is not a function or TypeError: Components is not a function
// 我使用的版本是"unplugin-auto-import": "^0.16.2",    "unplugin-vue-components": "^0.22.0"，node版本为19.8.1，vuecli5
// 导入 "unplugin-element-plus" 这个库，保证ElLoading等组件库的样式完整，要不然就会样式丢失
npm install -D unplugin-vue-components unplugin-auto-import unplugin-element-plus

// b.在vue.config.js中加入如下代码（直接粘贴复制即可）
// 因为在vue新的版本中，webpack.config.js已经被移除了，所以得写在vue.config.js中，所以写 configureWebpack
const { defineConfig } = require('@vue/cli-service')

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

// 添加这一行（保证ElLoading等组件库的样式完整，要不然就会样式丢失）
const ElementPlus = require('unplugin-element-plus/webpack')

module.exports = defineConfig({
  transpileDependencies: true,
  outputDir: './build',
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    },
    //配置webpack自动按需引入element-plus
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      })，
      // 添加这一行
      ElementPlus()
    ]
  }
})

b.因为element-plus更新速度太快，所以引入ElLoading和ILoadingInstance的路径已经发生了改变，新版本的ILoadingInstance接口名改为了LoadingInstance，去掉了I，所以在引入type的时候应该这么写

原来的 import { ILoadingInstance } from 'element-plus/lib/el-loading/src/loading.type'

改为

现在的 import { LoadingInstance } from 'element-plus/lib/components/loading/src/loading'

2.关于自动引用element-plus的icons

a.首先在项目中引入unplugin-icons和unplugin-auto-import

// 如果正常下载的话，会因为版本过高而报错 TypeError: IconsResolver is not a function，我这里下载的是 "unplugin-icons": "^0.14.1",不过这个也不是绝对，根据你的系统版本走

npm install unplugin-icons unplugin-auto-import -D

b.在vue.config.js中做如下配置（凡是加备注的地方都必须要添加，要不然就会报错）

const { defineConfig } = require('@vue/cli-service')

// 添加下面一行
const IconsResolver = require('unplugin-icons/resolver')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

const ElementPlus = require('unplugin-element-plus/webpack')
// 添加这一行
const Icons = require('unplugin-icons/webpack')

module.exports = defineConfig({
  transpileDependencies: true,
  outputDir: './build',
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    },
    //配置webpack自动按需引入element-plus
    plugins: [
      AutoImport({
        resolvers: [
          // Auto import icon components
          // 自动导入图标组件
          IconsResolver({
            prefix: 'Icon'
          }),
          ElementPlusResolver()
        ]
      }),
      Components({
        resolvers: [
          // Auto register icon components
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ['ep']
          }),
          ElementPlusResolver()
        ]
      }),
      ElementPlus(),
      // 添加这一行
      Icons({
        autoInstall: true
      })
    ]
  }
})

c.最后，必须添加@iconify-json/ep这个库，要不然图标不显示

 npm install @iconify-json/ep

// 在代码用引用如下：
<template #label>
  <span lass="tab-item">
    // 单独使用
    <i-ep-User />
    <span class="tab-content">账号登录</span>
  </span>
</template>

或者

<template #label>
  <span lass="tab-item">
    // 嵌套使用
    <el-icon :size="size" :color="color">
      <i-ep-User />
    </el-icon>
    <span class="tab-content">账号登录</span>
  </span>
</template>

3.<el-image />在<el-table></el-table>中出现图层嵌套bug，如下图所示：

image.png

解决方法：在<el-image />中加入preview-teleported属性
<template #image="scope">
  <el-image
    style="width: 100px; height: 100px"
    :src="scope.row.imgUrl"
    :preview-src-list="[scope.row.imgUrl]"
    preview-teleported
  />
</template>
// preview-teleported ：image-viewer 是否插入至 body 元素上