我可以将我现有的 vue 组件用作单个文件组件吗

Question

所以我有一个 vue 应用程序，我刚刚将它写入 django 提供的 .html 文件中。 我现在正在尝试使用 CLI 转移到一个专用的 vue.js 项目，因此我想分解我在该单个文件中拥有的所有组件并将它们移动到它们自己的 vue 文件中。

我的问题是我可以只创建一个名为 Overview.vue 的文件并将我的组件复制并粘贴到那里吗？ - 还是我需要做一些修改？

我看到的大多数单文件组件示例都有<style> <template> <script>的专用块。 在我粘贴在下面的组件中，模板位于组件内部。 我需要改变这个吗？

Vue.component('overview', {
  delimiters: [ '[[', ']]' ],
  props: ['jobs', 'links'],
  template: `
  <div overview>
  <h3>Overview</h3>
  <table :style="overviewStyle">
  <tr>
  <td>Start Time</td>
  <td>[[ jobs[0].time_start ]]</td>
  </tr>
  </table>
  </div>
  `,
  computed: {
    overviewStyle() {
      return {
        'padding': '8px',
        'width': '100%',
        'display': 'table',
      };
    },
  methods: {
    getStyle (name) {
      switch (name) {
        case 'SUCCESS':
        return {
          'background-color': '#dff0d8',
          'padding': '10px',
          'line-height': '1.42857143',
          'border': '1px solid #C0C0C0',
        }
        case 'IN_PROGRESS':
        return {
          'background-color': '#f4dc42',
          'padding': '10px',
        }
        case 'FAILURE':
        return {
          'background-color': '#f45942',
          'padding': '10px',
          'line-height': '1.42857143',
          'border': '1px solid #C0C0C0',
        }
      };
    },
  },
});

Answer 1

是的，您需要遵循Vue Single File Components的结构。

它接受 3 个块， <template> ， <script>和<style> 。

<template>
  <!-- your template here -->
</template>

<script>
  // javascript here
  export default {
    data() {
      return { ... }
    },
    methods: { ... }
    // etc
  }
</script>

<style>
  /* any css here */
</style>