vue3.0(三) Vite文件目录结构及SFC语法

---

Vite介绍

1. 为什么使用Vite？
   • 表现
     与Vite的ESbuild预绑定使其比使用任何其他JS绑定器都快10到100倍。这是因为它有助于提高页面速度并将CommonJS/UMD模块转换为ESM。
     基于Vite文件，“预绑定步骤使用esbuild执行，使Vite的冷启动时间明显快于任何基于JavaScript的绑定程序。”
   • 热模块更换（HMR）
     Vite使用HMR功能来跟踪应用程序中的更改，而无需重新加载整个页面。使用HMR API，浏览器将只加载页面的修改部分，并且仍然保留应用程序的状态。
     无需在应用程序中手动配置HMR API。它会在应用程序安装期间自动添加到您的项目中。
     使用HMR性能，无论模块数量或应用程序大小如何，都可以设计更轻、更快的应用程序。
   • 配置选项
     Vite允许您通过使用Vite.config.js或Vite.config.ts扩展默认配置来更好地控制项目的配置。它们位于项目的基本根目录中。
     您还可以使用–config CLI选项指定不同的配置文件，如下所示：
     vite --config my-config.js
2. Vite的工作原理
   当ES模块在ES2015中引入时，许多浏览器对ES6模块的支持很差。为了解决这个问题，现代浏览器现在支持原生ES模块。这允许开发人员以本机方式使用导入和导出语句。
   在本机ES中，导入必须获得相对或绝对URL，因为它不支持裸模块导入，例如：

   import { someMethod } from 'my-dep'
   

   上面的代码将在浏览器中抛出一个错误，因为许多浏览器不支持ES6模块。所以现在的问题是Vite是如何处理的？
   Vite将自动检测从源文件导入的裸模块，并对其执行以下两个操作：

   1.Vite将预绑定源文件以加快页面加载并将CommonJS/UMD模块转换为ESM。
   2.为了允许浏览器在不引发错误的情况下导入模块，Vite将把导入重写为这样的有效URL： /node_modules/.vite/my-dep.js?v=f3sf2ebb

3. Vite两个主要组成部分：
   • 开发服务器支持热模块替换（HMR），用于在应用程序执行期间更新模块。当对应用程序的源代码进行更改时，只更新更改，而不是重新加载整个应用程序。此功能有助于加快开发时间。
   • build命令使开发人员能够将他们的代码与Rollup捆绑在一起，Rollup被预先配置为输出用于生产的高度优化的静态资产。
4. 创建Vite项目
   要创建Vite应用程序，请打开终端并导航到要保存Vite程序的文件夹。然后运行此命令：

   npm create @vitejs/app my-vite-app
   

   注意：my_vite_app是我们要创建的vite应用程序的名称。你可以把它改成你喜欢的任何名字。
   运行以上命令后，系统将提示您选择框架和模板（变体）。推荐使用React，但您可以选择任何熟悉的框架和模板。

5. 运行Vite应用程序
   要在终端上运行Vite应用程序，请导航到应用程序文件夹（Vite_application），然后运行下面的dev命令来启动开发服务器：npm run dev运行以上命令将启动开发服务器。然后打开您的终端并输入http://localhost:3000.

Vite文件目录结构

├── 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 来生成不同的文件目录结构。

SFC语法

Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。下面是一个单文件组件的示例：

<script setup>
import { ref } from 'vue'
const greeting = ref('Hello World!')
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

Vue 的单文件组件是网页开发中 HTML、CSS 和 JavaScript 三种语言经典组合的自然延伸。<template>、<script> 和 <style> 三个块在同一个文件中封装、组合了组件的视图、逻辑和样式。

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

1. 为什么要使用 SFC
   使用 SFC 必须使用构建工具，但作为回报带来了以下优点：

• 使用熟悉的 HTML、CSS 和 JavaScript 语法编写模块化的组件
• 让本来就强相关的关注点自然内聚
• 预编译模板，避免运行时的编译开销
• 组件作用域的 CSS
• 在使用组合式 API 时语法更简单
• 通过交叉分析模板和逻辑代码能进行更多编译时优化
• 更好的 IDE 支持，提供自动补全和对模板中表达式的类型检查
• 开箱即用的模块热更新 (HMR) 支持
  SFC 是 Vue 框架提供的一个功能，并且在下列场景中都是官方推荐的项目组织方式：
• 单页面应用 (SPA)
• 静态站点生成 (SSG)
• 任何值得引入构建步骤以获得更好的开发体验 (DX) 的项目

2. SFC 是如何工作的
   Vue SFC 是一个框架指定的文件格式，因此必须交由 @vue/compiler-sfc 编译为标准的 JavaScript 和 CSS，一个编译后的 SFC 是一个标准的 JavaScript(ES) 模块，这也意味着在构建配置正确的前提下，你可以像导入其他 ES 模块一样导入 SFC：

   import MyComponent from './MyComponent.vue'
   
   export default {
     components: {
       MyComponent
     }
   }
   

SFC 中的 <style> 标签一般会在开发时注入成原生的 <style> 标签以支持热更新，而生产环境下它们会被抽取、合并成单独的 CSS 文件。

SFC 语法定义

1. 相应语言块
   • <template>

     每个 *.vue 文件最多可以包含一个顶层 <template> 块。
     语块包裹的内容将会被提取、传递给 @vue/compiler-dom，预编译为 JavaScript 渲染函数，并附在导出的组件上作为其 render 选项。

   • <script>

     每个 *.vue 文件最多可以包含一个 <script> 块。(使用 <script setup> 的情况除外)
     这个脚本代码块将作为 ES 模块执行。
     默认导出应该是 Vue 的组件选项对象，可以是一个对象字面量或是 defineComponent 函数的返回值。

   • <script setup>

     每个 *.vue 文件最多可以包含一个 <script setup>。(不包括一般的 <script>) 这个脚本块将被预处理为组件的
     setup() 函数，这意味着它将为每一个组件实例都执行。<script setup> 中的顶层绑定都将自动暴露给模板。

   • <style>

     每个 *.vue 文件可以包含多个 <style> 标签。
     一个 <style> 标签可以使用 scoped 或 module attribute (查看 SFC 样式功能了解更多细节) 来帮助封装当前组件的样式。使用了不同封装模式的多个 <style> 标签可以被混合入同一个组件。

2. 自定义块
   在一个 *.vue 文件中可以为任何项目特定需求使用额外的自定义块。举例来说，一个用作写文档的 <docs> 块。这里是一些自定义块的真实用例：

   Gridsome：<page-query>
   vite-plugin-vue-gql：<gql>
   vue-i18n：<i18n>
   

   自定义块的处理需要依赖工具链。如果你想要在构建中集成你的自定义语块
3. 自动名称推导
   SFC 在以下场景中会根据文件名自动推导其组件名：
   • 开发警告信息中需要格式化组件名时；
   • DevTools 中观察组件时；
   • 递归组件自引用时。例如一个名为 FooBar.vue 的组件可以在模板中通过 <FooBar/> 引用自己。(同名情况下) 这比明确注册/导入的组件优先级低。
4. 预处理器
   代码块可以使用 lang 这个 attribute 来声明预处理器语言，最常见的用例就是在 <script> 中使用 TypeScript：

   <script lang="ts">
     // use TypeScript
   </script>
   

   lang 在任意块上都能使用，比如我们可以在 <style> 标签中使用 Sass 或是 <template> 中使用 Pug：

   <template lang="pug">
   p {{ msg }}
   </template>
   
   <style lang="scss">
     $primary-color: #333;
     body {
       color: $primary-color;
     }
   </style>
   

   注意对不同预处理器的集成会根据你所使用的工具链而有所不同，具体细节请查看相应的工具链文档来确认：

   Vite
   Vue CLI
   webpack + vue-loader

5. 预处理器
   如果你更喜欢将 *.vue 组件分散到多个文件中，可以为一个语块使用 src 这个 attribute 来导入一个外部文件：

   <template src="./template.html"></template>
   <style src="./style.css"></style>
   <script src="./script.js"></script>
   

   请注意 src 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：
   • 相对路径需要以 ./ 开头
   • 也可以从 npm 依赖中导入资源

   <!-- 从所安装的 "todomvc-app-css" npm 包中导入一个文件 -->
   <style src="todomvc-app-css/index.css" />
   

   src 导入对自定义语块也同样适用：

   <unit-test src="./unit-test.js">
   </unit-test>
   

6. 注释
   在每一个语块中你都可以按照相应语言 (HTML、CSS、JavaScript 和 Pug 等等) 的语法书写注释。对于顶层注释，请使用 HTML 的注释语法 <!-- comment contents here -->

bug解决

1： 执行npm create @vitejs/app my-vite-app命令报如下错误：

解释：
这个警告信息表明@vitejs/create-app这个包已经被弃用，并建议使用npm init vite命令来创建新的Vite项目。
解决方法：
将npm create @vitejs/app my-vite-app使用npm init vite命令来创建新的Vite项目。