vue component library On-demand Import about arco-design-vue HOT 10 CLOSED

@KelseyYau you can use babel-plugin-import or vite-plugin-style-import to import component on demand. For example, in thevite project:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: '@arco-design/web-vue',
          esModule: true,
          resolveStyle: (name) => {
            return `@arco-design/web-vue/es/${name}/style/index`
          },
        }
      ]
    })
  ]
})

And then, you can import component on demand:

<script setup>
import { Button } from "@arco-design/web-vue"
</script>

<template>
    <Button type="primary">Primary</Button>
</template>

<style>
</style>

But, it's important to note that the component name doesn't have a default prefix, and I created the issue #39 .

from arco-design-vue.

@WJCHumble 你的方法更加完善，并且让我发现了我导入的是普通 css 而不是 less，所以无法定义 less 变量，还让我认识到了 vite-plugin-style-import 这个按需导入样式的库，谢谢！

上面的配置对我无效，我用的是：
上面的配置在 windows 和 Linux 中表现不一致，可用下面这个保持一致：

const { resolve } = require('path')
styleImport({
      libs: [
        {
          libraryName: '@arco-design/web-vue',
          esModule: true,
          resolveStyle: (name) => {
            return resolve(__dirname+'/node_modules/', '@arco-design/web-vue/es/' + name + '/style/index')
          },
        }
      ]
    })

from arco-design-vue.

https://github.com/LuckyHookin/vite/blob/arco.design/src/App.vue

import {Notification} from '@arco-design/web-vue';
import '@arco-design/web-vue/es/notification/style/css';
const hello = ()=>{
Notification.info('sdd')
}

https://github.com/LuckyHookin/vite/blob/arco.design/src/components/HelloWorld.vue

<template>
<Trigger :render-to-body="false" trigger="click" show-arrow class="demo-basic" position="top">
      <span>Hover Me</span>
      <template #content>
        123
        <input type="button" value="12">
      </template>
</Trigger>
</template>
<script setup>
import {Trigger} from '@arco-design/web-vue';
import '@arco-design/web-vue/es/trigger/style/css';
</script>

额。。我不知道这样是不是正确的，但确实可以用。

from arco-design-vue.

@KelseyYau Get it, we will add On-demand Import guide in docs

from arco-design-vue.

建议补充 babel-plugin-import 配置

from arco-design-vue.

调研了一下，近期会先添加一下 https://github.com/antfu/unplugin-vue-components 插件的支持，方便使用自动引入功能

from arco-design-vue.

调研了一下，近期会先添加一下 https://github.com/antfu/unplugin-vue-components 插件的支持，方便使用自动引入功能

新项目就等着这基础功能了

@WJCHumble 你的方法更加完善，并且让我发现了我导入的是普通 css 而不是 less，所以无法定义 less 变量，还让我认识到了 vite-plugin-style-import 这个按需导入样式的库，谢谢！

上面的配置对我无效，我用的是： 上面的配置在 windows 和 Linux 中表现不一致，可用下面这个保持一致：

const { resolve } = require('path')
styleImport({
      libs: [
        {
          libraryName: '@arco-design/web-vue',
          esModule: true,
          resolveStyle: (name) => {
            return resolve(__dirname+'/node_modules/', '@arco-design/web-vue/es/' + name + '/style/index')
          },
        }
      ]
    })

@WJCHumble 你的方法更加完善，并且让我发现了我导入的是普通 css 而不是 less，所以无法定义 less 变量，还让我认识到了 vite-plugin-style-import 这个按需导入样式的库，谢谢！

上面的配置对我无效，我用的是： 上面的配置在 windows 和 Linux 中表现不一致，可用下面这个保持一致：

const { resolve } = require('path')
styleImport({
      libs: [
        {
          libraryName: '@arco-design/web-vue',
          esModule: true,
          resolveStyle: (name) => {
            return resolve(__dirname+'/node_modules/', '@arco-design/web-vue/es/' + name + '/style/index')
          },
        }
      ]
    })

有没有试过打包后是否 tree shaking 了呢？

from arco-design-vue.

@flsion 请问支持unplugin-vue-components插件有什么进展吗？

from arco-design-vue.

@flsion 请问支持unplugin-vue-components插件有什么进展吗？

+1

from arco-design-vue.

Already merged unplugin/unplugin-vue-components#252, wait for unplugin-vue-components release version

from arco-design-vue.