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

Question

So I had a vue app that I just wrote into a .html file being served by django. I now am trying to move over to a dedicated vue.js project with the CLI and so I'm wanting to break apart all the components I had in that single file and move them into their own vue files.

My question is can I just create a file called Overview.vue and copy and paste my component into there as is? - or do I need to make some modifications?

Most examples I see of single file components have dedicated blocks for <style> <template> <script> . In my component I pasted below, the template is inside the component. Do I need to change this?

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

Yes, you will need to follow the structure for Vue Single File Components .

It accepts 3 blocks, <template> , <script> and <style> .

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

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

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