使用auto import之后，如何for循环使用。

[LITTMER]

package.json

{
  "name": "init",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "build:dev": "vue-tsc --noEmit && vite build --mode development",
    "build:pro": "vue-tsc --noEmit && vite build --mode production",
    "preview": "vite preview",
    "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx",
    "prettier": "prettier --write ."
  },
  "dependencies": {
    "element-plus": "^1.0.2-beta.71",
    "qs": "^6.9.6",
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@iconify-json/carbon": "^1.1.4",
    "@iconify-json/mdi": "^1.1.12",
    "@types/js-cookie": "^3.0.2",
    "@types/node": "^17.0.29",
    "@types/nprogress": "^0.2.0",
    "@typescript-eslint/eslint-plugin": "^5.21.0",
    "@typescript-eslint/parser": "^5.21.0",
    "@vitejs/plugin-vue": "^2.3.1",
    "axios": "^0.27.2",
    "dart-sass": "^1.25.0",
    "eslint": "^8.14.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.7.1",
    "js-cookie": "^3.0.1",
    "nprogress": "^0.2.0",
    "pinia": "^2.0.0-rc.10",
    "prettier": "^2.6.2",
    "sass": "^1.51.0",
    "typescript": "^4.5.4",
    "unplugin-auto-import": "^0.7.1",
    "unplugin-icons": "^0.14.3",
    "unplugin-vue-components": "^0.19.5",
    "vite": "^2.9.5",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-inspect": "^0.5.0",
    "vue-router": "^4.0.14",
    "vue-tsc": "^0.34.7"
  }
}

vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from 'path';
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import viteCompression from 'vite-plugin-compression'
import Inspect from 'vite-plugin-inspect'

const pathSrc = path.resolve(__dirname, 'src')

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 3000,
    open: false,
    https: false,
    proxy: {}
  },
  plugins: [
    vue(),
    AutoImport({
      // Auto import functions from Vue, e.g. ref, reactive, toRef...
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],
      // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
      // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
      resolvers: [
        ElementPlusResolver(),
        // Auto import icon components
        // 自动导入图标组件
        IconsResolver(),
      ],
      dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
    }),
    Components({
      resolvers: [
        // Auto register icon components
        // 自动注册图标组件
        IconsResolver({
          prefix: 'icon',
        }),
        // Auto register Element Plus components
        // 自动导入 Element Plus 组件
        ElementPlusResolver(),
      ],
      dts: path.resolve(pathSrc, 'components.d.ts'),
    }),
    Icons({
      autoInstall: true,
    }),
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz'
    }),
    Inspect()
  ],
  resolve: {
    alias: {
      '@': pathSrc
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/style/main.scss";'
      }
    }
  },
  build: {
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }
});

vue

<template>
  <div id="app-header">
    <div class="page-container">
      <div class="name">xxxxxxxxxxxxxx</div>
      <div class="menus-area">
        <div
          :class="['menu-item', active == index ? 'active' : '']"
          v-for="(menu, index) in menuList"
          @click="menuChange(index)"
        >
          <el-icon :size="20">
            <icon-mdi-account />
            <component :key="index" :is="menu.icon" />
          </el-icon>
          {{ menu.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
let active = ref(0)
const menuList = reactive([
  { id: 0, name: 'xx', url: 'home', icon: 'edit' },
  { id: 1, name: 'xx', url: 'home', icon: 'edit' },
  { id: 2, name: 'xx', url: 'home', icon: 'edit' },
  { id: 3, name: 'xx', url: 'home', icon: 'edit' },
  { id: 4, name: 'xx', url: 'home', icon: 'edit' },
  { id: 5, name: 'xx', url: 'home', icon: 'edit' },
  { id: 6, name: 'xx', url: 'home', icon: 'edit' },
])
const menuChange = (i:number):void => {
  active.value = i;
}
</script>

是生效的。
没有作为组件起作用。
想请教一下，auto import之后，for循环应该怎么实现？

[zenoncao]

动态加载菜单 icon 时，我也遇到同样的问题

[Inori-Lover]

#5

[Hao1617]

此问题解决了吗，我也遇到这个了

[so1ve]

不能这么用。。。。。
你觉得这怎么去做静态分析 还不如把图标导入进来 然后再用component标签

[LeoKun1231]

how to resolve it?

[xiangshu233]

@so1ve 请问有什么解决方案吗，比如动态菜单的图标

[so1ve]

@so1ve 请问有什么解决方案吗，比如动态菜单的图标

#5，或者是用@iconify/vue

[xiangshu233]

#5 这里的方式我都试过了，里面还是不能动态使用 icon。
请问 import { Icon } from '@iconify/vue'; 这个能配合 AutoImport 使用吗，我搜索一下，没找到相关示例

[so1ve]

这个不需要autoimport吧？可以动态传icon prop的

[xiangshu233]

@so1ve 我的意思是 import { Icon } from '@iconify/vue'; 这个 import 我也懒得写😶‍🌫️

[so1ve]

那就全局注册一个组件吧，看一下vue文档

[xiangshu233]

@so1ve 全局注册后 不知道他还是不是按需的

import { Icon } from '@iconify/vue';
app.component('Icon', Icon)

[so1ve]

不是按需的，全局可用 但是问题不大

[xiangshu233]

@so1ve 我担心的是全局注册 Icon 组件后，它仍然只是加载你引入那些 icon 吗

[antfu]

Close as #5.

[so1ve]

@so1ve 我担心的是全局注册 Icon 组件后，它仍然只是加载你引入那些 icon 吗

这个我不清楚，你可以看看它的文档

我记得是会的

[LittlerXu]

#5 这里的方式我都试过了，里面还是不能动态使用 icon。 请问 import { Icon } from '@iconify/vue'; 这个能配合 AutoImport 使用吗，我搜索一下，没找到相关示例

可以使用unplugin-vue-components/vite的自定义解析器来实现Icon组件的自动引入

Components({
        dirs: ['src/views', 'src/components'],
        resolvers: [
          // 自动导入 Element Plus 组件
          ElementPlusResolver(),
          // 自动引入图标组件
          IconsResolver({
            customCollections: [
              'my-icons',
            ]
          }),
          //自定义解析器: 用于自动引入Icon组件
          (componentName) => {
            if (componentName === 'Icon')
              return { name: componentName, from: '@iconify/vue' }
          },
        ],
      }),

[piskesocute]

          (componentName) => {
            if (componentName === 'Icon')
              return { name: componentName, from: '@iconify/vue' }
          },

這個好像可行！