我們已經在上一篇文章透過vue建立好了專案,也利用VS Code將專案資料夾準備妥當,接下來一樣由淺入深的來介紹一下網頁的開發,回憶一下上次有介紹的專案資料夾結構:
因為這次我們準備要來製作網頁了,所以馬上會碰到的資料夾就是「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 !!!的網頁了。
到這邊跟大家說明一下剛剛這一系列的動作,我們總共產生了三隻檔案,分別是:
<templates>
標籤包住。雖然這樣的案例跑出了結果,但是帶著之前學習網頁的經驗,對於這個範例應該會有很多疑問吧?
當然可能還有其他的問題,但不著急,我們先一題一題來看,首先第一題的答案是因為vue cli有許多的預設值設定,例如:
所以我們輸入網址「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檔案,這隻設定檔能夠處理的設定不僅只有這些,有興趣可以到官網查看更多的設定項目。
接下來是第二題檔案置放資料夾的問題,這跟之所以我們要使用vue cli有著絕大的關係,到目前為止我們提到幾個特點:
當我們透過vue cli開發完畢之後,執行「npm run build」就可以產生最終發佈至伺服器的檔案,如此產生的檔案能產生符合以上三點的特性,但我們之前介紹public與src這兩個資料夾的特性為:
因此,我們將Javascript放在src的資料夾中,應該就沒有什麼問題了,另外app.vue也並不是純HTML檔案,所以最後也不需要放進我們的包裝中,而應該是透過處理之後,轉換成HTML再發佈到伺服器,所以放在這個資料夾也應該是理所當然的!
好囉!這就是透過vue cli開發的起手式,下一篇文章我們將會釐清更多開發觀念,敬請期待囉!