vxe-table icon indicating copy to clipboard operation
vxe-table copied to clipboard

Published 20 hours ago • verified publisher icon x-extends

vite按需加载 方式更新

Open hxzAugustinus opened this issue 3 years ago • 21 comments

这个需求解决了什么问题：

增加 unplugin-vue-components 的 Resolver ，替换掉vite-plugin-style-import ;

缺点： vite-plugin-style-import 现在有 bug ，而且很长时间没修复了；

优点： unplugin-vue-components 官方支持更好，维护更好

建议的 API 是什么样的：

No response

是否已有其他不错的替代方案：

No response

hxzAugustinus avatar Jul 22 '22 07:07 hxzAugustinus

这么久都没有人处理吗， 都两个月了

zphtown avatar Sep 06 '22 11:09 zphtown

这么久都没有人处理吗， 都两个月了

最新版，按需加载还是不可用的状态。😓

ccitsxy avatar Sep 06 '22 12:09 ccitsxy

vite-plugin-style-import 样式加载了很多次。

Delevin888 avatar Sep 14 '22 03:09 Delevin888

@hxzAugustinus 1 创建vxeResolver.ts

import type { ComponentResolver, SideEffectsInfo } from "unplugin-vue-components"
import { kebabCase } from "unplugin-vue-components"

const getSideEffects = (name: string): SideEffectsInfo => {
  return `vxe-table/es/${name}/style.css`
}

export default (): ComponentResolver => {
  return {
    type: "component",
    resolve: (name) => {
      if (/^Vxe/.test(name)) {
        const compName = name.slice(3)
        const partialName = kebabCase(compName)
        return {
          from: `vxe-table/es/${partialName}`,
          sideEffects: getSideEffects(partialName),
        }
      }
    },
  }
}

2 配置vite.config.ts

import Components from "unplugin-vue-components/vite"
import { defineConfig } from "vite"
export default defineConfig({
  plugins: [
    Components({
      resolvers: [VxetableResolver()],
      dts: true,
    }),
  ]
})

3 main.ts

// 配置中文
import { VXETable } from "vxe-table"
import zhCN from "vxe-table/es/locale/lang/zh-CN"
import XEUtils from "xe-utils"
VXETable.setup({
  i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args),
})

moliyu avatar Oct 31 '22 05:10 moliyu

@hxzAugustinus 1 创建vxeResolver.ts

import type { ComponentResolver, SideEffectsInfo } from "unplugin-vue-components"
import { kebabCase } from "unplugin-vue-components"

const getSideEffects = (name: string): SideEffectsInfo => {
  return `vxe-table/es/${name}/style.css`
}

export default (): ComponentResolver => {
  return {
    type: "component",
    resolve: (name) => {
      if (/^Vxe/.test(name)) {
        const compName = name.slice(3)
        const partialName = kebabCase(compName)
        return {
          from: `vxe-table/es/${partialName}`,
          sideEffects: getSideEffects(partialName),
        }
      }
    },
  }
}

2 配置vite.config.ts

import Components from "unplugin-vue-components/vite"
import { defineConfig } from "vite"
export default defineConfig({
  plugins: [
    Components({
      resolvers: [VxetableResolver()],
      dts: true,
    }),
  ]
})

3 main.ts

// 配置中文
import { VXETable } from "vxe-table"
import zhCN from "vxe-table/es/locale/lang/zh-CN"
import XEUtils from "xe-utils"
VXETable.setup({
  i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args),
})

checkbox css不显示 这么引用

zhangchenna avatar Nov 21 '22 13:11 zhangchenna

@hxzAugustinus 1 创建vxeResolver.ts

import type { ComponentResolver, SideEffectsInfo } from "unplugin-vue-components"
import { kebabCase } from "unplugin-vue-components"

const getSideEffects = (name: string): SideEffectsInfo => {
  return `vxe-table/es/${name}/style.css`
}

export default (): ComponentResolver => {
  return {
    type: "component",
    resolve: (name) => {
      if (/^Vxe/.test(name)) {
        const compName = name.slice(3)
        const partialName = kebabCase(compName)
        return {
          from: `vxe-table/es/${partialName}`,
          sideEffects: getSideEffects(partialName),
        }
      }
    },
  }
}

2 配置vite.config.ts

import Components from "unplugin-vue-components/vite"
import { defineConfig } from "vite"
export default defineConfig({
  plugins: [
    Components({
      resolvers: [VxetableResolver()],
      dts: true,
    }),
  ]
})

3 main.ts

// 配置中文
import { VXETable } from "vxe-table"
import zhCN from "vxe-table/es/locale/lang/zh-CN"
import XEUtils from "xe-utils"
VXETable.setup({
  i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args),
})

checkbox css不显示 这么引用

import "vxe-table/es/icon/style.css"

main.js中加入这个

moliyu avatar Nov 21 '22 14:11 moliyu

右键菜单怎么添加 提示找不到 Failed to resolve component: vxe-table-context-menu @moliyu

目前找到的办法就是 手动导入 import { VXETable, Menu } from 'vxe-table'; app.use(router).use(store).use(Menu); 这样可以解决问题

zhangchenna avatar Nov 22 '22 02:11 zhangchenna

缩略提示 添加css import 'vxe-table/es/tooltip/style.css';

代码里按说应该自动引入的

zhangchenna avatar Dec 07 '22 06:12 zhangchenna

@hxzAugustinus 1 创建vxeResolver.ts

import type { ComponentResolver, SideEffectsInfo } from "unplugin-vue-components"
import { kebabCase } from "unplugin-vue-components"

const getSideEffects = (name: string): SideEffectsInfo => {
  return `vxe-table/es/${name}/style.css`
}

export default (): ComponentResolver => {
  return {
    type: "component",
    resolve: (name) => {
      if (/^Vxe/.test(name)) {
        const compName = name.slice(3)
        const partialName = kebabCase(compName)
        return {
          from: `vxe-table/es/${partialName}`,
          sideEffects: getSideEffects(partialName),
        }
      }
    },
  }
}

2 配置vite.config.ts

import Components from "unplugin-vue-components/vite"
import { defineConfig } from "vite"
export default defineConfig({
  plugins: [
    Components({
      resolvers: [VxetableResolver()],
      dts: true,
    }),
  ]
})

3 main.ts

// 配置中文
import { VXETable } from "vxe-table"
import zhCN from "vxe-table/es/locale/lang/zh-CN"
import XEUtils from "xe-utils"
VXETable.setup({
  i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args),
})

大佬，提个 pullRequest 给 unplugin-vue-components

Hisioni avatar Jan 16 '23 00:01 Hisioni

这么引用组件里调用的组件根本没法使用，要独立使用> > @hxzAugustinus 1 创建vxeResolver.ts

import type { ComponentResolver, SideEffectsInfo } from "unplugin-vue-components"

import { kebabCase } from "unplugin-vue-components"

const getSideEffects = (name: string): SideEffectsInfo => {

return vxe-table/es/${name}/style.css

}

export default (): ComponentResolver => {

return {

type: "component",

resolve: (name) => {

  if (/^Vxe/.test(name)) {

    const compName = name.slice(3)

    const partialName = kebabCase(compName)

    return {

      from: `vxe-table/es/${partialName}`,

      sideEffects: getSideEffects(partialName),

    }

  }

},

}

}

2 配置vite.config.ts

import Components from "unplugin-vue-components/vite"

import { defineConfig } from "vite"

export default defineConfig({

plugins: [

Components({

  resolvers: [VxetableResolver()],

  dts: true,

}),

]

})

3 main.ts

// 配置中文

import { VXETable } from "vxe-table"

import zhCN from "vxe-table/es/locale/lang/zh-CN"

import XEUtils from "xe-utils"

VXETable.setup({

i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args),

})

大佬，提个 pullRequest 给 unplugin-vue-components

zhangchenna avatar Jan 16 '23 14:01 zhangchenna

太惨了

nigiwen avatar May 25 '23 15:05 nigiwen

@hxzAugustinus 1 创建vxeResolver.ts

import type { ComponentResolver, SideEffectsInfo } from "unplugin-vue-components"
import { kebabCase } from "unplugin-vue-components"

const getSideEffects = (name: string): SideEffectsInfo => {
  return `vxe-table/es/${name}/style.css`
}

export default (): ComponentResolver => {
  return {
    type: "component",
    resolve: (name) => {
      if (/^Vxe/.test(name)) {
        const compName = name.slice(3)
        const partialName = kebabCase(compName)
        return {
          from: `vxe-table/es/${partialName}`,
          sideEffects: getSideEffects(partialName),
        }
      }
    },
  }
}

2 配置vite.config.ts

import Components from "unplugin-vue-components/vite"
import { defineConfig } from "vite"
export default defineConfig({
  plugins: [
    Components({
      resolvers: [VxetableResolver()],
      dts: true,
    }),
  ]
})

3 main.ts

// 配置中文
import { VXETable } from "vxe-table"
import zhCN from "vxe-table/es/locale/lang/zh-CN"
import XEUtils from "xe-utils"
VXETable.setup({
  i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args),
})

@moliyu 试了下，不写下面这句是按需加载的效果

import { VXETable } from 'vxe-table'

一旦写了这句，又变成全量加载了

lmlife2016 avatar Oct 11 '23 10:10 lmlife2016

@hxzAugustinus 1 创建vxeResolver.ts

import type { ComponentResolver, SideEffectsInfo } from "unplugin-vue-components"
import { kebabCase } from "unplugin-vue-components"

const getSideEffects = (name: string): SideEffectsInfo => {
  return `vxe-table/es/${name}/style.css`
}

export default (): ComponentResolver => {
  return {
    type: "component",
    resolve: (name) => {
      if (/^Vxe/.test(name)) {
        const compName = name.slice(3)
        const partialName = kebabCase(compName)
        return {
          from: `vxe-table/es/${partialName}`,
          sideEffects: getSideEffects(partialName),
        }
      }
    },
  }
}

2 配置vite.config.ts

import Components from "unplugin-vue-components/vite"
import { defineConfig } from "vite"
export default defineConfig({
  plugins: [
    Components({
      resolvers: [VxetableResolver()],
      dts: true,
    }),
  ]
})

3 main.ts

// 配置中文
import { VXETable } from "vxe-table"
import zhCN from "vxe-table/es/locale/lang/zh-CN"
import XEUtils from "xe-utils"
VXETable.setup({
  i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args),
})

@moliyu 试了下，不写下面这句是按需加载的效果

import { VXETable } from 'vxe-table'

一旦写了这句，又变成全量加载了

没办法，不然没法设置中文，这个得要作者支持

moliyu avatar Oct 11 '23 11:10 moliyu

分包加载，样式也有问题，不能点击右键，序号国际化失败。。icon 还有时候会乱码

zhangchenna avatar Oct 11 '23 23:10 zhangchenna

分包加载，样式也有问题，不能点击右键，序号国际化失败。。icon 还有时候会乱码

唉，没法说

xxwangkaimin avatar Oct 26 '23 08:10 xxwangkaimin

按需加载按需加载按照文档配置就行了 #2140

xuliangzhan avatar Apr 16 '24 02:04 xuliangzhan

按照新的按需加载配置，排序不显示两个三角图标，看样式是没有加载成功，而且一直提示缺少必要的 "column-config.useKey"，包括行也是，已经关闭虚拟滚动了 @xuliangzhan

zim-lee avatar Apr 19 '24 02:04 zim-lee

按需加载按需加载按照文档配置就行了 #2140

image 何解？

barry1102 avatar Apr 19 '24 03:04 barry1102

按需加载按需加载按照文档配置就行了 #2140

image 何解？

vxe-grid 提示 Failed to resolve component: vxe-table

zhangchenna avatar Apr 20 '24 08:04 zhangchenna

这种写法解决不了内置组件引用的问题

zhangchenna avatar Apr 20 '24 08:04 zhangchenna

4.6.0 还是不行

zhangchenna avatar Apr 23 '24 01:04 zhangchenna