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.53k stars 251 forks source link

✨ [Feature]: It is recommended to support the introduction of cdn #102

Closed iepsy closed 1 year ago

iepsy commented 1 year ago

What problem does this feature solve

在浏览器中直接能看到效果 方便快速开发调试

What does the proposed API look like

建议这样使用 min.js min.css

kagol commented 1 year ago

@zzcr 构建出来的产物包缺失umd格式的产物,需要支持umd才能用cdn方式直接引入。

kagol commented 1 year ago

@iepsy 已发布alpha版本,请按照以下方式使用,后续会发布正式版本。

创建一个 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.2.36/dist/vue.esm-browser.js",
          "@opentiny/vue": "https://unpkg.com/@opentiny/vue@3.6.8-alpha.0/runtime/tiny-vue.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 { Button } from '@opentiny/vue'

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

使用浏览器打开这个文件。