介紹 Vue CLI 架構並產生一個基本頁面

前言

Vue CLI 是 Vue.js 官方提供的一個完整系統，讓開發者可以快速建立和管理 Vue.js 專案。這篇文章將介紹 Vue CLI 的基本架構，並帶領大家產生一個基本的 Vue 頁面。

創建一個新專案

首先，我們使用 Vue CLI 來創建一個新的 Vue 專案。打開終端機並執行以下命令：

vue create my-project

你會看到一些選項，可以選擇預設配置或手動選擇功能。這裡我們選擇預設配置。

專案結構

創建完專案後，我們可以看到專案目錄下有以下結構：

my-project
├── node_modules
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── views
│   │   └── Home.vue
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
└── README.md

node_modules

這個目錄包含所有安裝的 npm 依賴包。當你執行 npm install 時，這些依賴包會自動安裝到這裡。通常你不會手動更改這個目錄下的內容，但了解這個目錄的存在很重要，因為它包含了所有你專案需要的外部函式庫。

public

這個目錄包含靜態資源，如 index.html 和 favicon.ico。這些資源在構建專案時會被直接複製到最終輸出的目錄。 index.html 是應用的入口文件，並且其中包含了 Vue.js 程式碼會插入的 <div id="app"></div> 元素。

src

這是我們主要編寫程式碼的地方，包括以下子目錄和文件：

assets：存放靜態資源，如圖片、字型等。這些資源可以通過相對路徑在組件中引用。
components：存放 Vue 組件，每個組件都是一個 .vue 文件，包含模板、腳本和樣式。
views：存放視圖組件，通常每個視圖對應一個路由。這些視圖組件通常是由多個普通組件組合而成。
App.vue：應用的根組件。所有其他組件都會嵌套在這個組件中。
main.js：應用的入口文件。這個文件創建 Vue 實例並掛載到 index.html 中的 #app 元素。

.gitignore

這個文件告訴 Git 哪些文件和目錄應該被忽略，通常包括 node_modules、編譯生成的文件和操作系統自動生成的文件。

babel.config.js

這是 Babel 的配置文件。Babel 是一個 JavaScript 編譯器，可以將現代 JavaScript 語法轉換為向後兼容的版本，以支援更舊的瀏覽器。

package.json

這是 npm 的配置文件，包含專案的基本信息、依賴包列表、腳本命令等。這個文件是每個 npm 專案的核心，讓你可以管理專案的依賴和配置。

README.md

這是專案的說明文件，通常用來描述專案的目的、使用方法等。這是一個 Markdown 文件，可以使用 Markdown 語法來編寫。

產生一個基本頁面

現在我們來創建一個基本的 Vue 頁面。首先，確保你在專案目錄下。接著，打開 src/components 目錄，創建一個新組件 MyPage.vue：

<template>
  <div class="my-page">
    <h1>Welcome to My Page</h1>
    <p>This is a basic Vue page created with Vue CLI.</p>
  </div>
</template>

<script>
export default {
  name: 'MyPage'
}
</script>

<style scoped>
.my-page {
  text-align: center;
  margin-top: 50px;
}
</style>

接著，我們需要在 src/views 目錄下創建一個視圖，命名為 MyPageView.vue：

<template>
  <div>
    <MyPage />
  </div>
</template>

<script>
import MyPage from '@/components/MyPage.vue';

export default {
  components: {
    MyPage
  }
}
</script>

最後，打開 src/router/index.js，並新增路由配置：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import MyPageView from '../views/MyPageView.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/my-page',
    name: 'MyPageView',
    component: MyPageView
  }
];

const router = new VueRouter({
  routes
});

export default router;

這樣，我們就完成了一個基本的 Vue 頁面創建。

運行專案

最後，在終端機中運行以下命令來啟動開發伺服器：

npm run serve

打開瀏覽器並訪問 http://localhost:8080，你應該可以看到我們創建的基本頁面。

結語

本文介紹了如何使用 Vue CLI 創建一個新的 Vue 專案，並生成一個基本的頁面。希望這篇文章能幫助你快速上手 Vue CLI，並開始你的 Vue.js 開發之旅。