*.vueファイル

.vueファイルは、VueコンポーネントをHTMLのような構文で記述するカスタムファイルタイプである.vueファイルには、3つのタイプのトップ言語ブロックと<が含まれています.style>. この3つの部分はhtml,js,css.&を表しています.lt;/p>
<p>そのうち<template>と<style>プリコンパイル言語で書くことをサポートしています.</p>
<pre class="has"><code class="hljs"><template>
  <div>
    <Header></Header>
    <div class="article_list">
      <ul>
        <li></li>
      </ul>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from '../components/header.vue'
import Footer from '../components/footer.vue'
export default {
  components: { Header, Footer },
  data () {
    return {
      list: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.$api.get('topics', null, r => {
        console.log(r)
      })
    }
  }
}
  .article_list {margin: auto;}
template部分
すべてのコードを包むためにhtmlラベルを回転する必要があります.この例では、ラベルとカスタムコンポーネントを用いる.
scriptセクション
まずカスタムコンポーネントを導入する必要があります

import Header from '../components/header.vue'
import Footer from '../components/footer.vue'

次に、参照されたファイルを除いて、すべてのコードを次のコードの間に包みます.

export default {
  //        ，      。
}

次に、引用したコンポーネントをcomponentsに明記します.そうすれば、templateで使用できます.

components: { Header, Footer },

Dataは私たちのデータです.templateではthisを使用できます.リストは私たちのデータを使用します.
createdは、私たちのコンポーネントのロードが完了したときに実行する必要がある内容を表します.
methodsは私たちのこのコンポーネントの方法です.
スタイル部分
templateのhtml要素に対していくつかのスタイルを書きます.