时间戳

首页 > 解决方案 > 如何在没有 npm 的情况下运行项目

vue.js - 如何在没有 npm 的情况下运行项目

问题描述

我正在使用 Vue.js

我想使用树形数据结构https://github.com/vinz3872/vuejs-tree

如果您使用 npm，这将非常有用。但我不想使用 npm。我想使用从 CDN 导入。但是当我从 CDN 导入时，我无法让它工作。我不知道该怎么做。

我尝试过不同的方式。我从 vuejs-tree/dist 包中取出文件并将它们放入项目中，它仍然无法正常工作。

在我看来，我做错了什么。您能告诉我如何通过从 CDN 导入 HTML 页面来使其工作吗？不是 npm 安装。

下面我展示了一个使用 npm 构建项目的示例。我需要把它翻译成一个没有 npm 的项目。

main.js

    import { createApp } from 'vue'
    import App from './App.vue'

    createApp(App).mount('#app')

应用程序.vue

<template>
  <div>
    <Tree
      id="my-tree-id"
      ref="my-tree"
      :custom-options="myCustomOptions"
      :custom-styles="myCustomStyles"
      :nodes="treeDisplayData"
    ></Tree>
  </div>
</template>

<script>
import Tree from "vuejs-tree";
export default {
  name: "App",
  components: {
    'Tree': Tree
  },
  data () {
    return {
      
      treeDisplayData: [
        {
          id: 1,
          text: "Electronics",
          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: function (nodeId, state) {
    },

    mySelectedFunction: function (nodeId, state) {
    },


    deleteNodeFunction: function (node) {
    },

    addNodeFunction: function (node) {

    },

  },


};
</script>

<style scoped>

</style>

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Tree structure</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

https://v3.vuejs.org/guide/installation.html

1.在页面导入为CDN包

  1. 下载 JavaScript 文件并自行托管

  2. 使用 npm 安装它

  3. 使用官方 CLI 搭建一个项目，该项目为现代前端工作流程提供包含电池的构建设置（例如，热重载、lint-on-save 等等）

我想使用选项 1

我导入了所有必需的包，但它不起作用。

标签： vue.jsvue-component

解决方案

推荐阅读