Vue3第二章：Vite文件目录结构及SFC语法

文章目录 1. Vite 文件目录结构2. Vue3 SFC 语法规范介绍

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

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

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