Where does the vue template need to be placed in the project?

Vue’s templates vary according to the actual needs of developers and the tools used. They can generally be placed in the following places:

1. template

within the Vue component Vue components can define their own templates in template, which is a core feature of Vue. In the script tag of the component, use template to define the template and bind the template to the component for use. For example:

<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>

2. Single file component

As Vue components become more and more complex, it is more convenient to use multi-file components, which requires the use of single files components. The main feature of single-file components is that templates, styles and logic are all encapsulated in a .vue file. For example:

<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>

3. Embedded Template

Sometimes, you might want to use some generic Vue templates instead of writing an entirely new one. In this case, you can choose to use embedded templates to achieve this. Embedded templates can be written like the following:

<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>

4. Public templates for Vue CLI

Vue CLI can provide you with predefined public templates so that you can quickly start Vue project. Public templates include: webpack, webpack-simple, browserify, browserify-simple, simple, etc. These templates can be downloaded and used through the official documentation.

Summary

The above is the main storage location and form of Vue templates. Templates can be easily defined whether inside a Vue component or in a single-file component. Of course, you can also choose public templates to develop your own Vue application to quickly start the project and develop it.

The above is the detailed content of Where does the vue template need to be placed in the project?. For more information, please follow other related articles on the PHP Chinese website!