02 使用Vite创建Vue3项目

概述

A Vue project is structured similarly to a lot of modern node-based apps and contains the following:

• A package.json file
• A node_modules folder in the root of your project
• Various other configuration files are usually contained at the root level, such as vite.config.js and .eslintrc.js, since they will generally have an effect across your whole project.

Vue 项目的结构与许多基于节点的现代应用程序类似，包含以下内容：

• package.json 文件

• 项目根目录下的 node_modules 文件夹

• 其他各种配置文件通常包含在根级别，如 vite.config.js 和 .eslintrc.js，因为它们通常会对整个项目产生影响。

By default, there is an index.html file at the root level that serves as a placeholder for loading the Vue application. You can modify this file to include header and footer scripts, such as Google Fonts or third-party JavaScript libraries that are not included as a part of your bundle.

默认情况下，根层级有一个 index.html 文件，作为加载 Vue 应用程序的占位符。您可以修改该文件以包含页眉和页脚脚本，如 Google 字体或未包含在捆绑包中的第三方 JavaScript 库。

The Vue project structure follows a pattern where you manage most of your source code within the /src directory. You can subdivide your Vue files into various folders, for example, using a components folder to store reusable Vue components. By default, Vite will create assets and components folders to code-split the default files. For beginners, it is good to follow this pattern until you get more comfortable。

Vue 项目结构遵循一种模式，即在 /src 目录中管理大部分源代码。您可以将 Vue 文件细分到不同的文件夹中，例如，使用组件文件夹来存储可重复使用的 Vue 组件。默认情况下，Vite 会创建 assets 和 components 文件夹，对默认文件进行代码分割。对于初学者来说，最好遵循这种模式，直到熟悉为止。

The public folder is a special directory containing files that need to be transferred directly to the output location.

公共文件夹是一个特殊目录，其中包含需要直接传输到输出位置的文件。

At this point, you should be somewhat familiar with how a Vue project structure looks. Next, we discuss Vue’s unique pattern – the SFC architecture.

至此，您应该对 Vue 项目的结构有了一定的了解。接下来，我们将讨论 Vue 的独特模式–SFC 架构。

创建Vite项目

这里版本推荐使用nodejs 20，可以使用nvm管理nodejs的版本：

nvm use 20

使用以下命令创建一个vue项目：

npm install -g yarn
yarn create vite c02_vite_demo --template vue

接着通过以下命令启动项目：

cd c02_vite_demo
yarn
yarn dev

SFC架构

Components are the building blocks of most modern frameworks. In general, splitting your code into component-specific chunks ensures code readability and facilitates the Don’t Repeat Yourself (DRY) principle. Vue’s SFC pattern follows this approach closely.

组件是大多数现代框架的构件。一般来说，将代码拆分成特定的组件块可确保代码的可读性，并有助于遵循 “不要重复”（DRY）原则。Vue 的 SFC 模式紧跟这种方法。

The SFC architecture centralizes the responsibility of both appearance and behavior into a single file, thus simplifying the architecture of your project.

SFC 架构将外观和行为的责任集中到一个文件中，从而简化了项目的架构。

You now can refer to your HTML, CSS, and JavaScript logic without switching files. Your default .vue file structure will be as follows:

现在，您可以在不切换文件的情况下引用 HTML、CSS 和 JavaScript 逻辑。您的默认 .vue 文件结构如下：

<script setup>
</script><template>
</template><style scoped>
</style>

A general good practice is to ensure your components file doesn’t contain more than 500 lines of code. If you encounter this situation, it’s recommended to split them into smaller reusable components. For example, in the header of your application, you may have a logo element that is reused on other pages. You would create a component such as logo.vue:

一般的良好做法是确保组件文件中的代码不超过 500 行。如果遇到这种情况，建议将其拆分成更小的可重复使用的组件。例如，在应用程序的页眉中，可能会有一个在其他页面中重复使用的徽标元素。您可以创建一个组件，如 logo.vue：

<template><img src="myLogo.png" />
</template>

In header.vue, you import the logo component into the script section and then include it as a nested component of the header component. You can achieve this by declaring it as a property of the components field:

在 header.vue 中，您需要将徽标组件导入脚本部分，然后将其作为嵌套组件包含在页眉组件中。为此，您可以将其声明为组件字段的一个属性：

<script>import logo from 'components/logo.vue'export default {components: {logo}}
</script>

In the template section, you can use the logo as a normal HTML element, as shown here:

在模板部分，您可以将徽标作为普通 HTML 元素使用，如图所示：

<template><header><a href="mywebsite.com"><logo /></a></header>
</template>

The output will be a header with the logo image rendered – and you can reuse the logo component in any other component when needed.

输出结果将是渲染了徽标图像的页眉，您可以在需要时在任何其他组件中重复使用徽标组件。

Very soon, you will have lots of these semantically structured files, which use small chunks of a reusable syntax that your team can implement across various application areas.

很快，您就会拥有大量这些语义结构文件，它们使用小块的可重用语法，您的团队可以在不同的应用领域实施这些语法。

In the next exercise, you will practice creating your first Vue component and displaying it in another component.

在下一个练习中，您将练习创建第一个 Vue 组件并将其显示在另一个组件中。

练习：构建你的第一个组件

Create another file in the components folder called Exercise1-01.vue and repeat the same step for scaffolding the Vue component:

在组件文件夹中创建另一个名为 Exercise1-01.vue 的文件，并重复同样的步骤为 Vue 组件搭建脚手架：

<template>
</template>
<script>
export default {
}
</script>
<style>
</style>

Within our Exercise1-01.vue component, compose a set of <div> tags, with an <h1> element and a heading inside the <template> tags:

在我们的 Exercise1-01.vue 组件中，编写一组 <div> 标记，在 <template> 标记内包含一个 <h1> 元素和一个标题：

<template><div><h1>My first component!</h1></div>
</template>

Inside the <style> block, add some styling as follows:

在 <style> 块中，添加一些样式如下：

<style>
h1 {font-family: 'Avenir', Helvetica, Arial,sans-serif;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

Import our component into App.vue by using the ES6 import method and defining the component inside the components object in the <script> block. We can now reference this component inside the HTML by using its name in camelCase or kebab-case (both will work):

使用 ES6 导入方法将组件导入 App.vue，并在 <script> 块的组件对象中定义组件。现在，我们可以在 HTML 中以 camelCase 或 kebab-case 引用该组件的名称（两者均可）：

<template><Exercise />
</template>
<script>
import Exercise from './components/Exercise1-01.vue'
export default {components: {Exercise,}
}
</script>

启动服务，浏览器访问：http://localhost:5173/

In this exercise, we saw how to structure Vue components using template tags, and scaffold basic Vue components using Vetur. We also created a new Vue component and reuse it in App.vue using ES6 syntax and property field components.

在本练习中，我们了解了如何使用模板标签构建 Vue 组件，以及如何使用 Vetur 构建基本的 Vue 组件。我们还创建了一个新的 Vue 组件，并在 App.vue 中使用 ES6 语法和属性字段组件对其进行了重用。

In the next section, we will gain an understanding of how to define the local state data of a component using data properties.

在下一节中，我们将了解如何使用数据属性定义组件的本地状态数据。