[Feature Request]Auto generate import component statement from element tag in vue template . 根据 vue template 内的元素tag自动生成 import 组件语句

[viruscamp]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

If we use 'Fully Import', we can write a component like this:

当完整引入组件时, 我们像这样写新组件

<template>
  <div>
    <a-button />
    <a-auto-complete />
  </div>
</template>
<script>
// SampleComponent.vue , import all antd components to Vue
export default {
}
</script>

If we use 'Import on Demand', with the help of babel-plugin-import, a component looks like this:

当按需引入组件时, 在 babel-plugin-import 的帮助下, 我们像这样写新组件

<template>
  <div>
    <a-button />
    <a-auto-complete />
  </div>
</template>
<script>
// SampleComponent.vue , import on demand using babel-plugin-import
import { Button, AutoComplete } from 'ant-design-vue'
export default {
  components: {
    'a-button': Button,
    'a-auto-complete': AutoComplete
  }
}
</script>

Why can't the build system auto generate import component statement from element tag in vue template?

为什么构建系统不能根据 vue template 里面的元素 tag 自动生成 import 组件语句呢?

This feature is used in 'Import on Demand' , but we can write component like 'Fully Import'.

此功能用于按需引入组件时, 也能用像完整引入时一样的写法写新组件.

It must inject into vue template compile stage, collect all 'Unknown custom element' errors, and translate the file to:

需要能深入 vue 模板编译阶段, 收集所有的'Unknown custom element'未知自定义元素错误, 然后翻译成:

<template>
  <div>
    <a-button />
    <a-auto-complete />
  </div>
</template>
<script>
import $_a_button from 'ant-design-vue/es/button'
import 'ant-design-vue/lib/button/style'
import $_a_auto_complete from 'ant-design-vue/es/auto-complete'
import 'ant-design-vue/lib/auto-complete/style'

export default {
  components: {
    'a-button': $_a_button,
    'a-auto-complete': $_a_auto_complete
  }
}
<script>

What does the proposed API look like?

It should share the settings of babel-plugin-import, only add elementPrefix . When the vue template compiler see a unknown custom element which has this prefix, insert a import statement, and add to vue.components .

应该共享 babel-plugin-import 的设置, 只是加一个 elementPrefix 元素前缀. 当 vue 模板编译器遇到有此前缀的未知元素时, 插入 import 组件语句, 并将组件加入 vue.components.

// babel.config.js
module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "import",
      {
        "elementPrefix": 'a',
        "libraryName": "ant-design-vue",
        "libraryDirectory": "es",
        "style": true
      }
    ],
    "import-vue-component"
  ]
}

[viruscamp]

See https://github.com/viruscamp/vue-cli-plugin-auto-import-tag

It works with some bug

[tangjinzhou]

Why not use global registration?

[viruscamp]

It's better to use my fork of babel-plugin-transform-imports instead of babel-plugin-import .
我 fork 一份 babel-plugin-transform-imports, 现在能实现 babel-plugin-import 所有功能, 还少了一些bug.

vue-cli-plugin-auto-import-tag works well with babel-plugin-transform-imports.
vue-cli-plugin-auto-import-tag 和 babel-plugin-transform-imports 配合良好.

[berksafran]

I need a help about this problem.

I'm using 'Import on Demand' solution. But, I'm not sure that it's working or not. How can I see on console or anywhere ?

Also, When I use Ant Design with this solution, my global CSS is overwritted. How can I fix this issue?

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.