如何不使用npm运行Vue项目并通过CDN引入vuejs-tree组件

核心注意事项 #

• 必须优先引入Vue3的资源，再加载vuejs-tree的JS和CSS资源，顺序不能颠倒
• CDN引入的组件无需使用import语法，直接从全局window对象获取组件实例即可
• 若选择自行托管资源，需要同时下载dist目录下的vuejs-tree.umd.js和style.css两个文件，不可遗漏样式文件

完整可运行单文件示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<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">
  <title>树形结构示例</title>
  <!-- 引入Vue3生产环境CDN -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <!-- 引入vuejs-tree JS资源，自行托管则替换为本地路径 -->
  <script src="https://unpkg.com/vuejs-tree@latest/dist/vuejs-tree.umd.js"></script>
  <!-- 引入vuejs-tree 样式资源，自行托管则替换为本地路径 -->
  <link rel="stylesheet" href="https://unpkg.com/vuejs-tree@latest/dist/style.css">
</head>
<body>
  <div id="app">
    <Tree
      id="my-tree-id"
      ref="my-tree"
      :custom-options="myCustomOptions"
      :custom-styles="myCustomStyles"
      :nodes="treeDisplayData"
    ></Tree>
  </div>

  <script>
    const { createApp } = Vue
    // 从全局获取Tree组件实例
    const Tree = window['vuejs-tree']

    createApp({
      components: {
        Tree
      },
      data() {
        return {
          treeDisplayData: [
            {
              id: 1,
              text: "电子产品",
              state: { checked: true, selected: true, expanded: true },
              checkable: false,
              depth: 3,
              nodes: [],
            }
          ]
        }
      },
      computed: {
        myCustomStyles() {
          return {}
        },
        myCustomOptions() {
          return {}
        }
      },
      mounted() {
        this.$refs["my-tree"].expandNode(1)
      },
      methods: {
        myCheckedFunction(nodeId, state) {},
        mySelectedFunction(nodeId, state) {},
        deleteNodeFunction(node) {},
        addNodeFunction(node) {}
      }
    }).mount('#app')
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Steve Jobs