概述

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

• package.json 文件

• 項(xiàng)目根目錄下的 node_modules 文件夾

• 其他各種配置文件通常包含在根級(jí)別，如 vite.config.js 和 .eslintrc.js，因?yàn)樗鼈兺ǔ?huì)對(duì)整個(gè)項(xiàng)目產(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.

默認(rèn)情況下，根層級(jí)有一個(gè) index.html 文件，作為加載 Vue 應(yīng)用程序的占位符。您可以修改該文件以包含頁(yè)眉和頁(yè)腳腳本，如 Google 字體或未包含在捆綁包中的第三方 JavaScript 庫(kù)。

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 項(xiàng)目結(jié)構(gòu)遵循一種模式，即在 /src 目錄中管理大部分源代碼。您可以將 Vue 文件細(xì)分到不同的文件夾中，例如，使用組件文件夾來(lái)存儲(chǔ)可重復(fù)使用的 Vue 組件。默認(rèn)情況下，Vite 會(huì)創(chuàng)建 assets 和 components 文件夾，對(duì)默認(rèn)文件進(jìn)行代碼分割。對(duì)于初學(xué)者來(lái)說(shuō)，最好遵循這種模式，直到熟悉為止。

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

公共文件夾是一個(gè)特殊目錄，其中包含需要直接傳輸?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)該對(duì) Vue 項(xiàng)目的結(jié)構(gòu)有了一定的了解。接下來(lái)，我們將討論 Vue 的獨(dú)特模式--SFC 架構(gòu)。

創(chuàng)建Vite項(xiàng)目

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

nvm use 20

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

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

接著通過(guò)以下命令啟動(dòng)項(xiàng)目：

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)件。一般來(lái)說(shuō)，將代碼拆分成特定的組件塊可確保代碼的可讀性，并有助于遵循 "不要重復(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è)文件中，從而簡(jiǎn)化了項(xiàng)目的架構(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 邏輯。您的默認(rèn) .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:

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

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

在模板部分，您可以將徽標(biāo)作為普通 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é)果將是渲染了徽標(biāo)圖像的頁(yè)眉，您可以在需要時(shí)在任何其他組件中重復(fù)使用徽標(biāo)組件。

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.

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

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

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

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

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

在組件文件夾中創(chuàng)建另一個(gè)名為 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 組件中，編寫(xiě)一組 <div> 標(biāo)記，在 <template> 標(biāo)記內(nèi)包含一個(gè) <h1> 元素和一個(gè)標(biāo)題：

<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> 塊的組件對(duì)象中定義組件?，F(xiàn)在，我們可以在 HTML 中以 camelCase 或 kebab-case 引用該組件的名稱(chēng)（兩者均可）：

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

啟動(dòng)服務(wù)，瀏覽器訪(fǎng)問(wèn)：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í)中，我們了解了如何使用模板標(biāo)簽構(gòu)建 Vue 組件，以及如何使用 Vetur 構(gòu)建基本的 Vue 組件。我們還創(chuàng)建了一個(gè)新的 Vue 組件，并在 App.vue 中使用 ES6 語(yǔ)法和屬性字段組件對(duì)其進(jìn)行了重用。

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ù)。