V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
hc93
V2EX  ›  Vue.js

通过 CDN 引入来使用 vue3-easy-data-table

  •  
  •   hc93 · 2022-07-04 11:51:18 +08:00 · 1485 次点击
    这是一个创建于 877 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Steps:

    1. 引入!

    2. 使用!

    3. awesome !

    ES module or UMD ?

    项目的 build tool 用的 vite ,打包出 xxxx.es.js(ES module 格式)和 xxxx.umd.js(UMD 格式)两种结果,本来想推荐在浏览器中通过 script 标签引入 CDN 的 ES module 文件并且使用的,就像下面这样:

    <link href="https://unpkg.com/vue3-easy-data-table/dist/style.css" rel="stylesheet">
    
    <body>
      <div id="app">
        <easy-data-table
          :headers="headers"
          :items="items"
        />
      </div>
    
      <script type="importmap">
        {
          "imports": {
            "vue": "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js",
            "vue3-easy-data-table": "https://unpkg.com/vue3-easy-data-table"
          }
        }
      </script>
      
      <script type="module">
        import { createApp } from 'vue'
        import Vue3EasyDataTable from 'vue3-easy-data-table';
    
        const App = createApp({
            components: {
              EasyDataTable: Vue3EasyDataTable,
            },
            data () {
              return {
                headers:[
                  { text: "PLAYER", value: "player" },
                  { text: "TEAM", value: "team"},
                  { text: "NUMBER", value: "number"},
                  { text: "POSITION", value: "position"},
                  { text: "HEIGHT", value: "indicator.height"},
                  { text: "WEIGHT (lbs)", value: "indicator.weight", sortable: true},
                  { text: "LAST ATTENDED", value: "lastAttended", width: 200},
                  { text: "COUNTRY", value: "country"},
                ],
                items: [
                  { player: "Stephen Curry", team: "GSW", number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: "USA"},
                  { player: "Lebron James", team: "LAL", number: 6, position: 'F', indicator: {"height": '6-9', "weight": 250}, lastAttended: "St. Vincent-St. Mary HS (OH)", country: "USA"},
                  { player: "Kevin Durant", team: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: "USA"},
                  { player: "Giannis Antetokounmpo", team: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 242}, lastAttended: "Filathlitikos", country: "Greece"},
                ],
              }
            },
          })
    
        if (document.getElementById('app')) {
          App.mount('#app')
        }
      </script>
    </body>
    

    不过 safari,firefox 等浏览器都还不支持importmap的用法:https://caniuse.com/?search=importmap 所以还是用了老办法,在打包入口文件 index.ts 中检测浏览器 vue 环境并全局注册 Vue3EasyDataTable 组件,https://github.com/HC200ok/vue3-easy-data-table/blob/main/src/index.ts:

    if (typeof window !== 'undefined' && window.Vue) {
      window.Vue.createApp({}).component('Vue3EasyDataTable', DataTable);
    }
    

    然后使用的时候通过window['vue3-easy-data-table']获取。

    文档

    https://hc200ok.github.io/vue3-easy-data-table-doc/getting-started/via-cdn.html

    如有建议或需求,欢迎提 issue ,项目地址: https://github.com/HC200ok/vue3-easy-data-table/

    如果觉得还不错,欢迎给我一个 github⭐支持我一下,谢谢!

    第 1 条附言  ·  2022-07-04 13:09:21 +08:00
    images unavailable
    第 2 条附言  ·  2022-07-04 13:24:52 +08:00
    1. 引用!

    2. 使用!

    3. awesome!

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1845 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 16:28 · PVG 00:28 · LAX 08:28 · JFK 11:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.