将index.html转换为vue组件

Question

我正在使用Vue.js构建网页，而我对Java还是比较陌生。我之所以使用Vue，是因为我发现它使用组件.vue文件的方式使得使用Java编程更加容易。

但是，考虑到GitHub来提供库，代码等方面的帮助，很难，因为它们通常被编写为一个.html页面。

我找到了我想使用的库，但不确定如何从中创建Vue组件。这是因为它实际上并没有返回任何东西。我不确定如何export default{}这些内容，以便可以在App.vue中使用它。

此外，HTML和脚本有点集成，所以我想知道这会改变我的实现方式吗？

这里是index.html：

$(document).ready(function() {
    var map = new FlightsMap("schedules_map", {
        width: 960,
        height: 440,
        stations: "stations.json",
        flights: "flights.json"       
    });

    $("#reset").click(function() { map.reset(); });
    $("#zoom_in").click(function() { map.zoomIn(); });
    $("#zoom_out").click(function() { map.zoomOut(); });
    $("#show_schedules").click(function() { map.showSchedules(); });
});

#station_name {
    display: inline-block; 
    float: right; 
}

a {
    cursor: pointer;
}

<script src="https://cdn.rawgit.com/santiagohecar/flights-map/master/dist/flights-map.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div id="schedules_map"></div>

<div style="width:800px;">
    <a id="reset" href="javascript:void(0)">Reset</a>
    <a id="zoom_in" href="javascript:void(0)">Zoom in</a>
    <a id="zoom_out" href="javascript:void(0)">Zoom out</a>
    <a id="show_schedules" href="javascript:void(0)">all</a>
    <div id="station_name" ></div>
</div>

来自here

Answer 1

很抱歉，回复花了很长时间。这应该为您工作：

Map.vue-这是Vue组件

<template>
  <div>
    <div id="schedules_map"></div>

    <div style="width:800px;">
      <a @click="map.reset()" href="#">Reset</a>
      <a @click="map.zoomIn()" href="#">Zoom in</a>
      <a @click="map.zoomOut()" href="#">Zoom out</a>
      <a @click="map.showSchedules()" href="#">All</a>
      <div id="station_name"></div>
    </div>
  </div>
</template>



<script>
import FlightsMap from "../../node_modules/flights-map/src/flights-map";

export default {
  name: "Map",
  props: ["flights", "stations"],
  data() {
    return {
      map: {}
    };
  },
  watch: {
    flights() {
      this.createMap();
    },
    stations() {
      this.createMap();
    }
  },
  methods: {
    createMap() {
      this.map = new FlightsMap("schedules_map", {
        width: 960,
        height: 440,
        stations: this.stations,
        flights: this.flights
      });
    }
  },
  mounted() {
    this.createMap();
  }
};
</script>

<style scoped>
#station_name {
  display: inline-block;
  float: right;
}
a {
  cursor: pointer;
  margin: 1rem;
}
</style>

安装

您需要使用npm安装flights-map，或者从某些本地来源引用它。 flights-map不是npm软件包，因此您必须直接从GitHub安装它：

npm install https://github.com/hrcarsan/flights-map.git

取决于组件的放置位置，您需要相应地将路径更改为flights-map。当我对其进行测试时，我具有以下文件结构：

node_modules/
 ┗ flights-map/
    ┣ src/
    ┗ ┗ flights-map.js
src/
 ┗ components/
    ┗ Map.vue
 ┣ main.js
 ┗ App.vue

因此，您需要从Map.vue上移两个级别，以高于node_modules和src，然后下移至flights_map/src/flights-map.js。另外请注意，dist/中有一个flights-map/目录，其中的[ C0]，但是那个不能正常工作。因此，请确保您的路径转到flights-map.js目录，而不是src

使用Map.vue

App.vue

dist

无论何时要使用Map组件，都可以像这样调用它：

<template>
  <Map
    stations="https://raw.githubusercontent.com/hrcarsan/flights-map/master/example/stations.json"
    flights="https://raw.githubusercontent.com/hrcarsan/flights-map/master/example/flights.json"
  ></Map>
</template>

<script>
import Map from "@/components/Map.vue";

export default {
  name: "App",
  components: {
    Map
  }
};
</script>

[

<Map
    stations="https://raw.githubusercontent.com/hrcarsan/flights-map/master/example/stations.json"
    flights="https://raw.githubusercontent.com/hrcarsan/flights-map/master/example/flights.json"
></Map>

是stations的网址。

[stations.json是flights的网址

Sidenote：

不需要Map.vue中的观察者，他们只是在使地图具有反应性。您也可以删除它们和flights.json方法。只需将createMap()的内容放在createMap()

---

嗯，希望对您有所帮助。随时问我是否还有其他问题。