文章目录

• • 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 的例子：

SFC 包含了