search

opentiny / tiny-vue

TinyVue is an enterprise-class UI component library of OpenTiny community, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.
https://opentiny.design/tiny-vue
MIT License
1.6k stars 256 forks source link

🐛 [Bug]: CDN importmap uses TinyVue, and the missing install method makes it impossible to register components through use (TinyVue) #285

Closed kagol closed 1 year ago

kagol commented 1 year ago

Version

latest

Vue Version

latest

Link to minimal reproduction

通过以下 CDN 方式使用 TinyVue：

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 vue 和 @opentiny/vue -->
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3.3.4/dist/vue.esm-browser.js",
          "@opentiny/vue": "https://unpkg.com/@opentiny/vue@3.8.3/runtime/tiny-vue.mjs",
          "@opentiny/vue-common": "https://unpkg.com/@opentiny/vue@3.8.3/runtime/tiny-vue-common.mjs",
          "@opentiny/vue-icon": "https://unpkg.com/@opentiny/vue@3.8.3/runtime/tiny-vue-icon.mjs",
          "@opentiny/vue-locale": "https://unpkg.com/@opentiny/vue@3.8.3/runtime/tiny-vue-locale.mjs"
        }
      }
    </script>
    <!-- 引入 @opentiny/vue 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/@opentiny/vue-theme/index.css">
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      import { createApp } from 'vue'
      // 引入 @opentiny/vue 组件
      import TinyVue from '@opentiny/vue'

      createApp({
        template: `
          <tiny-button>确定</tiny-button>
        `
      })
      // 注册 @opentiny/vue 组件
      .use(TinyVue)
      .mount('#app')
    </script>
  </body>
</html>

会报以下错误：

vue.esm-browser.js:1513 [Vue warn]: A plugin must either be a function or an object with an "install" function.
warn @ vue.esm-browser.js:1513
use @ vue.esm-browser.js:5194
（匿名） @ tiny-vue-demo2.html:38
vue.esm-browser.js:1513 [Vue warn]: Failed to resolve component: tiny-button
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <App>

组件也无法正确渲染。

Step to reproduce

如上

原因应该是 runtime 方式导入的 TinyVue，未包含 install 方法。

What is expected

No response

What is actually happening

No response

Any additional comments (optional)

No response

mengqiuleo commented 1 year ago

这个问题可以解决一下吗，我正在编写 playground，需要全量引入，目前也是会报相同的错误

zzcr commented 1 year ago 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 vue 和 @opentiny/vue -->
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3.2.45/dist/vue.esm-browser.js",
          "@opentiny/vue": "https://unpkg.com/@opentiny/vue@3.9.0/runtime/tiny-vue.mjs",
          "@opentiny/vue-common": "https://unpkg.com/@opentiny/vue@3.9.0/runtime/tiny-vue-common.mjs",
          "@opentiny/vue-icon": "https://unpkg.com/@opentiny/vue@3.9.0/runtime/tiny-vue-icon.mjs",
          "@opentiny/vue-locale": "https://unpkg.com/@opentiny/vue@3.9.0/runtime/tiny-vue-locale.mjs"
        }
      }
    </script>
    <!-- 引入 @opentiny/vue 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/@opentiny/vue-theme/index.css">
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      import { createApp } from 'vue'
      // 引入 @opentiny/vue 组件
      import TinyVue from '@opentiny/vue'

      createApp({
        template: `
          <tiny-button>确定</tiny-button>
        `
      })
        // 注册 @opentiny/vue 组件
        .use(TinyVue)
        .mount('#app')
    </script>
  </body>
</html>
zzcr commented 1 year ago

已在v3.9.0修复