概述

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 項目的結(jié)構(gòu)與許多基于節(jié)點的現(xiàn)代應(yīng)用程序類似，包含以下內(nèi)容：

• package.json 文件

• 項目根目錄下的 node_modules 文件夾

• 其他各種配置文件通常包含在根級別，如 vite.config.js 和 .eslintrc.js，因為它們通常會對整個項目產(chǎn)生影響。

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 應(yīng)用程序的占位符。您可以修改該文件以包含頁眉和頁腳腳本，如 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 項目結(jié)構(gòu)遵循一種模式，即在 /src 目錄中管理大部分源代碼。您可以將 Vue 文件細分到不同的文件夾中，例如，使用組件文件夾來存儲可重復(fù)使用的 Vue 組件。默認情況下，Vite 會創(chuàng)建 assets 和 components 文件夾，對默認文件進行代碼分割。對于初學(xué)者來說，最好遵循這種模式，直到熟悉為止。

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

公共文件夾是一個特殊目錄，其中包含需要直接傳輸?shù)捷敵鑫恢玫奈募?/p>

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.

至此，您應(yīng)該對 Vue 項目的結(jié)構(gòu)有了一定的了解。接下來，我們將討論 Vue 的獨特模式--SFC 架構(gòu)。

創(chuàng)建Vite項目

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

nvm use 20

使用以下命令創(chuàng)建一個vue項目：

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

接著通過以下命令啟動項目：

cd c02_vite_demo
yarn
yarn dev

SFC架構(gòu)

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.

組件是大多數(shù)現(xiàn)代框架的構(gòu)件。一般來說，將代碼拆分成特定的組件塊可確保代碼的可讀性，并有助于遵循 "不要重復(fù)"（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 架構(gòu)將外觀和行為的責(zé)任集中到一個文件中，從而簡化了項目的架構(gòu)。

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

現(xiàn)在，您可以在不切換文件的情況下引用 HTML、CSS 和 JavaScript 邏輯。您的默認 .vue 文件結(jié)構(gòu)如下：

<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 行。如果遇到這種情況，建議將其拆分成更小的可重復(fù)使用的組件。例如，在應(yīng)用程序的頁眉中，可能會有一個在其他頁面中重復(fù)使用的徽標元素。您可以創(chuàng)建一個組件，如 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 中，您需要將徽標組件導(dǎo)入腳本部分，然后將其作為嵌套組件包含在頁眉組件中。為此，您可以將其聲明為組件字段的一個屬性：

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

輸出結(jié)果將是渲染了徽標圖像的頁眉，您可以在需要時在任何其他組件中重復(fù)使用徽標組件。

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.

很快，您就會擁有大量這些語義結(jié)構(gòu)文件，它們使用小塊的可重用語法，您的團隊可以在不同的應(yīng)用領(lǐng)域?qū)嵤┻@些語法。

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

在下一個練習(xí)中，您將練習(xí)創(chuàng)建第一個 Vue 組件并將其顯示在另一個組件中。

練習(xí)：構(gòu)建你的第一個組件

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

在組件文件夾中創(chuàng)建另一個名為 Exercise1-01.vue 的文件，并重復(fù)同樣的步驟為 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> 標記內(nèi)包含一個 <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 導(dǎo)入方法將組件導(dǎo)入 App.vue，并在 <script> 塊的組件對象中定義組件?，F(xiàn)在，我們可以在 HTML 中以 camelCase 或 kebab-case 引用該組件的名稱（兩者均可）：

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

啟動服務(wù)，瀏覽器訪問：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.

在本練習(xí)中，我們了解了如何使用模板標簽構(gòu)建 Vue 組件，以及如何使用 Vetur 構(gòu)建基本的 Vue 組件。我們還創(chuàng)建了一個新的 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.

在下一節(jié)中，我們將了解如何使用數(shù)據(jù)屬性定義組件的本地狀態(tài)數(shù)據(jù)。