Vue 3第二章：Vite文件目录结构及SFC语法_vue3的文件结构

1. Vite 文件目录结构

Vue3 并没有强制规定文件目录结构，开发者可以按照自己喜欢的方式组织代码。不过，通常情况下，我们会按照以下方式组织文件目录：

├── public
│   ├── favicon.ico
├── src
│   ├── assets
│   ├── components
│   ├── router
│   ├── store
│   ├── views
│   ├── App.vue
│   └── main.js
├── index.html
├── README.md
├── tsconfig.json
├── vite.config.ts
└── package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• public 目录用于存放静态文件，例如 index.html 文件和图片等。
• src 目录用于存放源代码。
• assets 目录用于存放静态资源，例如图片、字体等。
• components 目录用于存放组件。
• router 目录用于存放路由文件。
• store 目录用于存放 Vuex 相关文件。
• views 目录用于存放页面组件。
• App.vue 文件是应用程序的根组件。
• main.js 文件是应用程序的入口文件。
• README.md 说明文件
• tsconfig.json typescript配置文件
• vite.config.ts vite配置文件

以上是一个常见的文件目录结构，您可以根据自己的需求进行调整。同时，在使用 Vue CLI 创建项目时，也可以选择不同的 preset 来生成不同的文件目录结构。

2. Vue3 SFC 语法规范介绍

Vue3 支持使用单文件组件（SFC）来组织代码。SFC 将一个组件的模板、样式和逻辑封装在一个文件中，使得组件的代码更加清晰和易于维护。以下是一个简单的 SFC 的例子：

<template>
	  <div>
		    {{ message }}
	  </div>
</template>

<script setup>
	import { ref } from 'vue'
	let message = ref('Hello, world!')
</script>

<style scoped>
	div {
		  font-size: 24px;
		  color: #333;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

SFC 包含了 <template>、<script> 和 <style> 三个标签，分别用于表示组件的模板、逻辑和样式。

• <template> 标签中的内容就是组件的模板，可以使用 Vue 的模板语法来编写页面
• <script> 标签中的内容是组件的逻辑，可以使用 JavaScript 来编写业务逻辑。
• <style>标签中的内容是组件的样式，可以使用 CSS 来编写样式。scoped 属性表示这个样式只作用于当前组件，不会影响其他组件。