Vue 建置指南

在這篇文章中，我們將介紹如何快速建置一個 Vue 專案，並涵蓋一些基本的檔案結構和組件使用的方式。希望能幫助你順利開始 Vue 的開發之旅！

JESHOOTS.COM null on Unsplash

專案建置步驟

建置Vue專案

在PowerShell執行以下命令，應該以官方網站為主

npm create vue@latest

1. 終止終端機
   如果你需要中斷正在執行的命令，可以使用 Ctrl + C 來終止終端機。
2. 切換到專案目錄
   使用以下命令來進入你的專案目錄：

   cd project-test
   
   

3. 安裝套件
   為了確保所有需要的套件都已安裝，執行：

   npm install
   
   

4. 啟動開發伺服器
   每次開發時，你需要執行以下命令來啟動伺服器：

   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的相關使用方法。

對於這類的撰寫方式習慣嗎?歡迎多多進行良性的知識交流喔!目前是在學習階段，大家有不同看法的話歡迎進行良性的知識交流!

提醒，文章僅供正當的知識參考，文章不負任何責任。