Di manakah templat vue perlu diletakkan dalam projek?

Templat Vue berbeza mengikut keperluan sebenar pembangun dan alatan yang digunakan Secara amnya, ia boleh diletakkan di tempat berikut:

1. templat dalam komponen Vue

<.> Komponen Vue boleh menentukan templat mereka sendiri dalam templat, yang merupakan ciri teras Vue. Dalam teg skrip komponen, gunakan templat untuk menentukan templat dan mengikat templat pada komponen untuk digunakan. Contohnya:

<template>
  <div>
    <h1 id="title">{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
  export default {
    name: &#39;MyComponent&#39;,
    data() {
      return {
        title: &#39;Vue Template&#39;,
        content: &#39;This is a Vue template example&#39;
      }
    }
  }
</script>

Komponen fail tunggal

Apabila komponen Vue menjadi semakin kompleks, adalah lebih mudah untuk menggunakan komponen berbilang fail, yang memerlukan penggunaan Komponen fail tunggal. Ciri utama komponen fail tunggal ialah templat, gaya dan logik semuanya terkandung dalam fail .vue. Contohnya:

<template>
  <div>
    <h1 id="title">{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
  export default {
    name: &#39;MyComponent&#39;,
    data() {
      return {
        title: &#39;Vue Template&#39;,
        content: &#39;This is a Vue template example&#39;
      }
    }
  }
</script>

Templat terbenam

Kadangkala, anda mungkin mahu menggunakan beberapa templat Vue generik dan bukannya menulis templat baharu sepenuhnya. Dalam kes ini, anda boleh memilih untuk menggunakan templat terbenam untuk mencapai matlamat ini. Templat terbenam boleh ditulis seperti ini:

<template>
  <div>
    <h1 id="title">{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
  export default {
    name: &#39;MyComponent&#39;,
    data() {
      return {
        title: &#39;Vue Template&#39;,
        content: &#39;This is a Vue template example&#39;
      }
    },
    template: document.getElementById(&#39;my-template&#39;)
  }
</script>

Templat awam untuk Vue CLI

Vue CLI boleh memberi anda templat awam yang dipratentukan supaya anda boleh dengan cepat Memulakan Projek Vue. Templat awam termasuk: webpack, webpack-simple, browserify, browserify-simple, simple, dsb. Templat ini boleh dimuat turun dan digunakan melalui dokumentasi rasmi.

Ringkasan

Di atas ialah lokasi storan utama dan bentuk templat Vue. Templat boleh ditakrifkan dengan mudah sama ada di dalam komponen Vue atau dalam komponen fail tunggal. Sudah tentu, anda juga boleh memilih templat awam untuk membangunkan aplikasi Vue anda sendiri untuk memulakan projek dan membangunkannya dengan cepat.

Atas ialah kandungan terperinci Di manakah templat vue perlu diletakkan dalam projek?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!