【全棧】SprintBoot+vue3迷你商城-擴展：vue3項目創建及目錄介紹

往期的文章都在這里啦，大家有興趣可以看一下
【全棧】SprintBoot+vue3迷你商城（1）
【全棧】SprintBoot+vue3迷你商城（2）
【全棧】SprintBoot+vue3迷你商城-擴展：利用python爬蟲爬取商品數據
【全棧】SprintBoot+vue3迷你商城（3）
【全棧】SprintBoot+vue3迷你商城（4）
【全棧】SprintBoot+vue3迷你商城（5）
【全棧】SprintBoot+vue3迷你商城（6）
【全棧】SprintBoot+vue3迷你商城-擴展：vue的基本用法

1.創建vue3項目

在熟悉目錄之前首先需要創建項目

1.1. npm init vue@latest

使用 npm init vue@latest 命令來簡化項目初始化過程：

npm init vue@latest

在創建過程中，你會被提示選擇一些預設或手動配置項目選項。

1.2. 進入項目根目錄

cd my-vue3-app

1.3.安裝相應依賴

npm install

1.3. 啟動開發服務器

npm run dev

2.目錄結構

在進行前端開發之前，還需要熟悉vue3項目的目錄及結構及功能
下面是本次迷你商城前端開發的目錄結構：

my-vue-app/
├── node_modules/                # 項目依賴的第三方庫
├── public/                      # 靜態資源文件夾
│   ├── favicon.ico              # 網站圖標
│   └── index.html               # 主頁面模板
├── src/                         # 源代碼文件夾
│   ├── assets/                  # 靜態資源（如圖片、樣式表等）
│   ├── components/              # 可復用的Vue組件
│   ├── router/                  # 路由配置
│   │   └── index.js             # Vue Router 實例化文件
│   ├── stores/                   # Vuex狀態管理倉庫
│   │   └── index.js             # Vuex Store 實例化文件
│   ├── views/                   # 頁面級別的組件（視圖）
│   ├── App.vue                  # 根組件
│   ├── main.js 				 # 應用入口文件，創建 Vue 實例	
|	├── api/					 # 存放與后端接口交互的函數
│   └── utils/					 # 存放一些工具函數，如request.js
├── .gitignore                   # Git 忽略規則
├── index.html					 # 應用程序的入口點
├── package.json                 # 項目包信息及腳本命令
├── README.md                    # 項目說明文檔
└── vue.config.js                # Vue CLI 的配置文件（可選）

3.目錄和文件的具體解釋

node_modules/

存放所有通過 npm 或 yarn 安裝的第三方庫和依賴項。

public/

放置不經過構建過程直接被復制到輸出目錄的靜態資源文件。通常包括 index.html 和其他公共資產（例如 favicon.ico）。

src/

這是應用程序的主要源代碼所在位置。

• assets/：包含非 JavaScript 文件，如圖片、字體或樣式表。
• components/：存放可以跨頁面使用的通用組件。
• router/：用于定義應用中的路由邏輯，特別是當使用 Vue Router 時。
• stores/：如果你的應用使用 Vuex 進行狀態管理，那么這里會包含 Vuex store 的配置。
• views/：頁面級別的組件通常放在這個目錄下，它們代表了不同的“頁面”。
• App.vue：根組件，它是所有其他組件的容器。
• main.js：應用的入口文件，在這里初始化 Vue 實例，并引入必要的插件和服務。
• api/：存放與后端接口如登錄、注冊等交互的函數，使得前端能夠訪問后端接口
• utils/：存放各種實用工具函數和輔助功能，如request.js來制定統一請求入口以及請求、響應攔截器。

其他重要文件

• .gitignore：列出哪些文件和目錄不應提交到 Git 版本控制系統中。
• index.html： 整個應用程序的入口點，當瀏覽器加載應用時，它首先會請求并解析這個 HTML 文件。
• package.json：描述項目的元數據以及包含安裝和運行項目的腳本命令。
• README.md：項目的說明文檔，通常包括項目簡介、安裝指南等信息。
• vue.config.js：Vue CLI 的自定義配置文件，允許你覆蓋默認的行為（例如修改輸出路徑、代理設置等）。這是一個可選文件，只有在需要時才創建。