iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 22
0
自我挑戰組

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

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

  • 分享至 

  • xImage
  •  

我們已經在上一篇文章透過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 !!!的網頁了。

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

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

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

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

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

  1. 預設的HTML入口為index.html
  2. 預設載入的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檔案,這隻設定檔能夠處理的設定不僅只有這些,有興趣可以到官網查看更多的設定項目。

接下來是第二題檔案置放資料夾的問題,這跟之所以我們要使用vue cli有著絕大的關係,到目前為止我們提到幾個特點:

  1. 透過bebal來編譯Javascript來符合各瀏覽器不同的寫法
  2. 跨頁面共用vue元件
  3. 對檔案進行壓縮(將HTML、CSS、Javascript)壓縮成單行式的程式碼節省空間和流量

當我們透過vue cli開發完畢之後,執行「npm run build」就可以產生最終發佈至伺服器的檔案,如此產生的檔案能產生符合以上三點的特性,但我們之前介紹public與src這兩個資料夾的特性為:

  1. public:檔案不會經過壓縮和其他處理,在網頁打包之後直接將檔案複製到包裝裡
  2. src:檔案會經過壓縮處理,處理後將檔案包裝起來

因此,我們將Javascript放在src的資料夾中,應該就沒有什麼問題了,另外app.vue也並不是純HTML檔案,所以最後也不需要放進我們的包裝中,而應該是透過處理之後,轉換成HTML再發佈到伺服器,所以放在這個資料夾也應該是理所當然的!

好囉!這就是透過vue cli開發的起手式,下一篇文章我們將會釐清更多開發觀念,敬請期待囉!


上一篇
vue3 Composition API 學習手冊-21 透過 vue cli 來建立專案
下一篇
vue3 Composition API 學習手冊-23 安裝scss編譯器
系列文
網頁前端框架 Vue 3 從頭開始(重新挑戰)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言