vue에 작성된 페이지의 접미사 이름은 무엇입니까?

vue에 작성된 페이지의 접미사 이름은 ".vue"입니다. ".vue" 파일은 Vue 구성 요소를 설명하기 위해 HTML과 유사한 구문을 사용하는 사용자 정의 파일 형식입니다. vue 페이지에는 세 가지 구성 요소가 있습니다. 1. 템플릿 태그로 래핑된 인터페이스 표시 코드(HTML 코드) 2. 스크립트 태그로 래핑된 비즈니스 구현 코드(js 스크립트 코드) 스타일 태그 스타일 코드(CSS 스타일 코드).

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

vue로 작성된 페이지의 접미사 이름은 ".vue"입니다. .vue”。

.vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: &#39;Hello world!&#39;
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>

组件结构讲解

• 把每个组件都放到一个独立的.vue文件里，

• 文件的后缀是：.vue 文件

• 此文件三大部分： template 、 script 、 style

• template

  • 写html结构的

  • 注意这里的html部分必须用一个标签全包住

• script

  • 写逻辑的，data、methods、生命周期钩子、计算属性等等代码都写在这个部分

  • 注意这里的data不再是一个对象，在组件里，data将会是一个函数,return一个对象。

• style

  • 写样式的

  • 如何 导入外部css,

    • 在css中的导入(主体使用)：

     @import url(./babel.css);

• 快捷键快速生成： <vue>

• 单文件组件的运行

  在cmd窗口该vue文件根目录下输入vue serve index.vue 这里index.vue

  .vue 파일은 HTML과 유사한 구문을 사용하여 Vue 구성 요소를 설명하는 사용자 정의 파일 형식입니다. 각 .vue 파일에는 세 가지 유형의 최상위 언어 블록