Vue3 按需导入

前言

这里以vite+vue3+ts为例，需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件 unplugin-vue-components : 组件自动导入 unplugin-auto-import： 直接使用 Vue Composition API 等，无需导入

npm init vite@latest vite-app --template vue-ts
npm i unplugin-vue-components unplugin-auto-import -D
npm install element-plus --save

配置

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
//  ElementPlusResolver, AntDesignVueResolver, VantResolver, HeadlessUiResolver, ElementUiResolver
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 'vue', 'vue-router', 'vue-i18n', '@vueuse/head', '@vueuse/core'
      resolvers: [ElementPlusResolver()],
      imports: ['vue'],
      dts: 'src/auto-import.d.ts'
    }),
    Components({
      // 指定组件默认位置
      // dirs: ['src/components'],
      // ui库解析器
      resolvers: [ElementPlusResolver()],
      // 组件的有效文件扩展名
      extensions: ['vue'],
      // 配置文件生成位置
      dts: 'src/components.d.ts'
    })
  ]
})

const flatArr = allPostList.get().map((i) => i.data.category)

function transformArray(arr) {
  const { result, hash } = arr.reduce(
    ({ result, hash }, subArr) => {
      let parent = null
      for (let i = 0; i < subArr.length; i++) {
        let name = subArr[i]
        if (i === 0) {
          parent = name
          if (!hash[name]) {
            result.push({ name })
            hash[name] = true
          }
        } else {
          if (!hash[name + parent]) {
            result.push({ name, parent })
            hash[name + parent] = true
          }
        }
        if (i === subArr.length - 1) {
          parent = null
        }
      }
      return { result, hash }
    },
    { result: [], hash: {} }
  )
  return result
}

const categorys = transformArray(flatArr)

function getLength({ name }) {
  return allPostList.get().filter((i) => i.data.category.includes(name)).length
}

const prepareQuery = (categories, parent) => {
  const query = {} as any
  let result
  if (parent) {
    query.parent = parent
    const member = categories.find((i) => i.parent == query.parent)
    result = member ? [member] : []
  } else {
    query.parent = undefined
    result = categories.filter((i) => i.parent == query.parent)
  }
  return result.sort((a, b) => {
    if (a < b) return -1
    if (a > b) return 1
    return 0
  })
}

function getHtm() {
  const depth = 3
  const hierarchicalList = (level, parent?) => {
    let result = ''

    console.log(prepareQuery(categorys, parent))

    prepareQuery(categorys, parent).forEach((cat, i) => {
      let child

      console.log(level, cat.name, 'kkkkkkkk', i)

      if (level + 1 < depth) {
        console.log(level + 1, '[][][][][]', cat.name)

        child = hierarchicalList(level + 1, cat.name)
      }

      let catname = `<a itemprop="url" href="">${cat.name}</a><small>( ${getLength(cat)} )</small>`

      switch (level) {
        case 0:
          result += `<div><h2 class="item header">${catname}</h2>`
          break

        case 1:
          result += `<h3 class="item section">${catname}</h3>`
          break

        case 2:
          result += `<div class="item normal"><div class="title">${catname}</div></div>`
          break
      }

      if (child) {
        result += `${child}`
      }

      if (level === 0) {
        result += '</div>'
      }
    })

    return result
  }

  console.log(hierarchicalList(0))
}

getHtm()