Vue 扩展
在我们的 Vue 项目中使用 *.vue 文件是有意义的，因为
- 使用模板和组件可以更轻松地处理大型项目。
- 我们可以通过 https 协议查看和测试我们的项目，就像用户看到页面一样。
- 保存更改时页面会立即更新，无需重新加载。
- 这就是在 Vue 中构建真实网页的方式。
- 这就是开发人员的工作方式。
为什么？
正如我们在上一页关于 Vue 中的模板和组件中所见，现在需要不同的工作方式，因为我们想
- 拥有更大的项目
- 将所有与 Vue 相关的代码集中在一个地方
- 在 Vue 中使用组件（我们很快就会谈到这一点）
- 在编辑器中拥有突出显示和自动完成支持
- 自动更新浏览器
为了实现这一切，我们必须切换到 *.vue 文件。
如何？
SFC（单文件组件），或 *.vue 文件，更易于使用，但不能直接在浏览器中运行，因此我们需要设置我们的计算机来将我们的 *.vue 文件编译成 *.html、*.css 和 *.js 文件，以便浏览器可以运行我们的 Vue 应用程序。
为了基于 SFC 构建我们的网页，我们使用名为 Vite 的程序作为构建工具，并在 VS Code 编辑器中使用 Volar 扩展来编写代码，以支持 Vue 3 语言功能。
设置
按照以下三个步骤安装在您的计算机上运行 Vue SFC 应用程序所需的内容。
-
"VS Code" 编辑器
有很多不同的编辑器可用于 Vue 项目。我们使用 VS Code 编辑器。 下载 VS Code 并安装它。
-
VS Code "Volar" 扩展
为了在编辑器中使用 *.vue 文件获得突出显示和自动完成功能，请打开 VS Code，转到左侧的“扩展”。搜索“Volar”并安装下载量最多、描述为“Vue 3 语言支持”的扩展。
-
Node.js
下载并安装最新版本的 Node.js，因为 Vue 构建工具“Vite”运行在它的基础之上。
Node.js 是一个开源的服务器端 JavaScript 运行时环境。
创建默认示例项目
按照以下步骤在您的计算机上创建默认 Vue 示例项目。
-
在您的计算机上创建一个用于 Vue 项目的文件夹。
-
在 VS Code 中，通过从菜单中选择“终端”->“新建终端”来打开一个终端
-
使用终端通过使用命令（如
cd <folder-name>、cd ..、ls（Mac/Linux）和dir（Windows））导航到您刚刚创建的 Vue 文件夹。如果您不熟悉在终端中编写命令，请查看我们的命令行界面 (CLI) 简介 这里。
-
在您在终端中导航到 Vue 文件夹后，键入
npm init vue@latest
-
创建您的第一个项目，项目名为“firstsfc”
-
对所有选项回答“否”
-
现在您应该在您的终端中看到以下内容
-
现在我们将按上述建议运行命令。
运行此命令将目录更改为“firstsfc”文件夹中的新项目
cd firstsfc
-
安装所有必需的依赖项，以便 Vue 项目可以运行
npm install
-
启动开发服务器
npm run dev
-
终端窗口现在应该如下所示
您的浏览器应该自动打开示例项目
如果您在浏览器中找不到示例项目，请使用终端中的链接。您在终端窗口中找到的链接的地址可能与上面屏幕截图中的地址不同。
现在示例项目正在您的机器上通过 Vite 构建工具以开发模式运行。
项目文件
自动创建的示例项目包含许多文件，我们将快速浏览其中一些文件。
main.js
转到 VS Code 编辑器中的 Vue 项目，在“src”文件夹中找到“main.js”文件
"main.js" 告诉 Vite 如何根据“App.vue”文件构建 Vue 项目。这类似于我们之前如何使用脚本标签提供 CDN 链接来告诉浏览器如何运行我们的 Vue 代码，以及我们如何将 Vue 实例安装到 <div id="app"> 标签中。
App.vue
在同一个示例项目文件夹中，找到“App.vue”文件并打开它。与所有其他 *.vue 文件一样，“App.vue”包含三个部分：一个 <script> 部分、一个 <template> 部分和一个 <style> 部分。
App.vue:
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
</header>
<main>
<TheWelcome />
</main>
</template>
<style scoped>
header {
line-height: 1.5;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
}
</style>
正如您在“App.vue”的脚本部分中看到的那样，引用了其他 *.vue 文件：这些是“组件”，位于“components”文件夹中。如果您查看“App.vue”文件的“模板”部分，您会看到一些不是普通 HTML 标签的标签：<HelloWorld> 和 <TheWelcome>。这就是组件的引用方式。组件就像应用程序中的应用程序。我们很快将更多地了解组件。
