在這篇文章中，我們將介紹如何快速建置一個 Vue 專案，並涵蓋一些基本的檔案結構和組件使用的方式。希望能幫助你順利開始 Vue 的開發之旅！
專案建置步驟
建置Vue專案
在PowerShell執行以下命令，應該以官方網站為主
npm create vue@latest- 終止終端機
如果你需要中斷正在執行的命令，可以使用 Ctrl + C 來終止終端機。 - 切換到專案目錄
使用以下命令來進入你的專案目錄：cd project-test
- 安裝套件
為了確保所有需要的套件都已安裝，執行：npm install
- 啟動開發伺服器
每次開發時，你需要執行以下命令來啟動伺服器：npm run dev
檔案結構
在專案中，assets 資料夾用來放置圖片和 CSS 檔案。當你想在 Vue 組件中使用圖片時，可以這樣引用：
<img :src="require('@/assets/路徑/圖片.png')" alt="描述文字" />
路由設置
在 Vue 中，路由是用來管理不同頁面的。通常，你會在 router/index.js 中配置路由，每個畫面（View）對應到一個頁面。例如，你可以設置一個按鈕來切換不同的頁面。
const routes = [
{
path: '/',
component: HomeView,
},
{
path: '/about',
component: AboutView,
},
];
組件使用
宣告組件
要在你的 Vue 檔案中使用自定義組件，首先需要匯入並註冊它。這裡以 DangerBtn 為例：
<script>
import DangerBtn from '@/components/DangerBtn.vue';
export default {
components: {
DangerBtn,
},
};
</script>
使用組件
在你的html中，可以直接使用已註冊的組件：
<template>
<div>
<h1>歡迎來到我的 Vue 頁面</h1>
<DangerBtn />
</div>
</template>
限制樣式作用範圍
為了讓樣式只作用於當前的 Vue 檔案，可以使用 scoped 屬性：
<style scoped>
h1 {
color: blue;
}
</style>
這樣，只有在這個組件中定義的樣式才會被應用，而不會影響其他組件。
結語
希望這篇指南能幫助你更熟悉地開始建置Vue專案和使用 Vue。隨著你的熟悉度提升，可以深入學習 Vue 的更多功能，例如狀態管理、生命周期鉤子等。接下來會介紹更多Vue的相關使用方法。
對於這類的撰寫方式習慣嗎?歡迎多多進行良性的知識交流喔!目前是在學習階段，大家有不同看法的話歡迎進行良性的知識交流!
提醒，文章僅供正當的知識參考，文章不負任何責任。
