Java登陸第三十五天——Vite+Vue3目錄結構、.vue檔案理解（SFC）

rowbed發表於2024-03-14
JavaViteVue

專案結構

使用Vite建立Vue3+JS預設專案結構如下：(vmoudle1是專案名)
image

Vue中提出了元件的概念。

元件是程式碼複用的一種方式，用於抽象出一個可複用的UI，方便在不同的場景中進行重複使用。

元件根據大小可被分為：(從小到大)
1.元件
2.佈局元件
3.頁面級別元件

  • .vscode

    • 忽略

  • node_modules

    • 儲存專案依賴

  • public

    • 儲存公共資源，如 HTML 檔案、影像、字型等.

  • src （儲存專案的原始碼，以下是src內部劃分建議）：

    1. assets：儲存專案中用到的靜態資源。

    2. components：儲存元件相關的檔案。

    3. layouts ：儲存佈局元件的檔案。

    4. pages ：儲存頁面級別的元件。

    5. plugins ：儲存 Vite 外掛相關的檔案。

    6. router ：儲存 Vue.js 的路由配置檔案。

    7. store ：儲存 Vuex 狀態管理相關的檔案。

    8. utils ：儲存一些通用的函式。

  • .gitignore

    • git配置檔案

  • index.html

    • 程式預設入口

  • package.json

    • Node.js配置檔案。

  • README.md

    • 專案文件。

  • vite.config.js

    • Vite的配置檔案。

知道即可，後續的學習中涉及到就理解了。

.vue檔案

如下是一個傳統頁面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="./Test.css" rel="stylesheet" type="text/css">
    <script src="./Test.js"></script>
</head>
<body>
    Hello,world!
</body>
</html>

其由三部分組成，第一是HTML，第二是外部的CSS，第三是外部的JS。

類似的，在VUE中被稱為多檔案元件。

把上述多檔案元件改成單檔案元件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*假裝有CSS程式碼*/
    </style>
    <script>
    //假裝有JS程式碼
    </script>
</head>
<body>
    Hello,world!
</body>
</html>

這不就是把外部的檔案全部寫在內部了嗎？

是的，VUE對HTML/CSS/JS進行了統一封裝。並提供了新的檔案格式.vue

.vue由三個部分組成：

  1. <template>

  2. <style>

  3. <script>

.vue中部分 傳統部分 描述
<template> HTML 代替傳統的.html檔案
<style> CSS 代替傳統的.js檔案
<script> JS 代替傳統的.css檔案

這就是SFC（Single-File Component，簡稱 SFC,單檔案元件）。

在VUE中，就是編寫一個個的元件，再將各個元件拼湊成完整的頁面。
image

相關文章