vue3 Composition API 學習手冊-22 vue cli 起手式

第 12 屆 iThome 鐵人賽

DAY 22

自我挑戰組

網頁前端框架 Vue 3 從頭開始（重新挑戰）系列第 22 篇

12th鐵人賽 vue3 vue 3

史坦利

2020-10-04 09:01:21

1832 瀏覽

分享至

我們已經在上一篇文章透過vue建立好了專案，也利用VS Code將專案資料夾準備妥當，接下來一樣由淺入深的來介紹一下網頁的開發，回憶一下上次有介紹的專案資料夾結構：

node_modules：專案中需要用到的模組，例如：eslint, babel …等（包含未來找到好用的模組透過npm安裝之後也會在這裡面）。
public：不需要被vue壓縮的專案檔案，在打包時會自動被複製到目的資料夾中。
src：專案開發資料夾，基本上專案應該會在這個資料夾中被開發。
.gitignore：略過版控的檔案清單。
babel.config.js：babel的設定檔。
packgae.json：專案的描述檔，包含紀錄安裝了哪些模組…等等。
packgae-lock.json：紀錄安裝模組的版本。
README.md：專案的讀我檔。

因為這次我們準備要來製作網頁了，所以馬上會碰到的資料夾就是「public」和「src」這兩個，這兩個資料夾裡面已經有一些檔案了，但是為了讓我們方便從頭開始了解vue cli頁面建立的方式，我們先把這兩個資料夾內的檔案清空，自行來建立一次頁面試試看（其他的就先別動到囉！）。

首先我們先在public資料夾內建立一個「index.html」，內容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Index</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

可以看的出來頁面跟之前我們準備要開始使用vue的情況一模一樣，接下來我們在src資料夾建立一支「App.vue」的檔案，內容如下：

<template>
    <h1>{{ "Hello World !!!" }}</h1>
</template>
<style>
    h1{
        color: darkblue;
    }
</style>

接下來在src資料夾中繼續建立一支「main.js」，內容如下：

import { createApp } from 'vue'
import App from '@/App.vue'
createApp(App).mount('#app');

接著運行「npm run serve」，進入「localhost:8080」就可以看到我們建立的Hello World !!!的網頁了。

到這邊跟大家說明一下剛剛這一系列的動作，我們總共產生了三隻檔案，分別是：

index.html：網頁的進入點
App.vue：App 組件，類似我們前幾篇文件中提到的Component，透過引用的方式引入到index.html中，文件中僅包含組件的HTML並使用<templates>標籤包住。
main.js：Javascript的進入點，透過這個檔案的第1, 2兩行將vue和app這個component載入到index當中，透過第五行渲染出HTML並且透過第六行將他載入到index中ID為app的這個元素中。

雖然這樣的案例跑出了結果，但是帶著之前學習網頁的經驗，對於這個範例應該會有很多疑問吧？

我們的index.html完全沒有引入任何Javascript，為何Script卻能生效？
為什麼有些檔案放在pubilc，有些檔案放在src的資料夾

當然可能還有其他的問題，但不著急，我們先一題一題來看，首先第一題的答案是因為vue cli有許多的預設值設定，例如：

預設的HTML入口為index.html
預設載入的Javascript為main.js

所以我們輸入網址「localhost:8080」之後即便沒有給網頁名稱，他也是幫我們優先打開index.html，另外會自動在這個HTML中載入「main.js」，但當然這些預設的設定是可以修改的，只要在專案資料夾的最外側，新增一個「vue.config.js」檔案，並將檔案內容撰寫如下：

module.exports = {
  pages: {
    index: {
      // entry for the page
      entry: 'src/main.js',
      // the source template
      template: 'public/index.html',
    },
  }
}

其中第五行就是預設載入的Javascript檔案，若要修改此處建議修改檔名就好，路徑的部分等等會透過第二個問題來進行說明，而第七行就是預設的HTML檔案，這隻設定檔能夠處理的設定不僅只有這些，有興趣可以到官網查看更多的設定項目。