iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
5
自我挑戰組

【I Love Vue】 30天愛上 Vue系列 第 6

【I Love Vue 】 Day 06 愛上 Vue- 一切的開端(程式進入點)

  • 分享至 

  • xImage
  •  

在大學修程式語言的時候,總會有老師耳提面命的說,
程式架構很重要、目錄結構要搞懂......

這些東西固然重要,不過對於一個初學者來說,不僅太多太複雜,
也沒有足夠的經驗讓他去懂這些東西。
所以如往常一樣,如同wizard(精靈)帶著小夥伴們透過一些小目標,
一步一步介紹我們專案的目錄結構。

public

我們可以在VSCode 中的檔案總管裡面看到一個叫public的資料夾。
** public 裡面主要放一些Vue的application啟動前的檔案 **
(後面會解釋 甚麼是 vue application)

  1. 打開VSCode
  2. 開啟檔案總管 (ctrl + shift + E)
  3. 點開 public
  4. 點擊 index.html
    https://ithelp.ithome.com.tw/upload/images/20200920/20115941oKlme65jCN.jpg

頁籤上的標題和Logo

一般 index 都會是網站的起始頁面(首頁)。
若使用vue cli 去創建專案的話,會預設public底下的index(\public\index.html)作為我們的首頁。

打開index.html後看到這兩行程式碼
https://ithelp.ithome.com.tw/upload/images/20200920/20115941TcRIvGqR3i.jpg

Logo

這行程式碼是用來設置你頁籤上的logo,所指到的就是 \public\favicon.ico 這個圖案

<link rel="icon" href="<%= BASE_URL %>favicon.ico">
  1. 我們可以試著在public中加入想要的圖片(vscode.png)
    (注意這邊 icon 可以小一點,且為正方形比較好 32*32大小即可)
  2. 並試著將程式碼改成
<link rel="icon" href="<%= BASE_URL %>vscode.png">

https://ithelp.ithome.com.tw/upload/images/20200920/20115941Bgvxxru5Jc.jpg

3.然後再Terminal輸入

$ npm run serve
  1. ctrl + 左鍵 點擊 http://localhost:8080/
  2. 就能看到左上角的logo被我們更新上去了
    https://ithelp.ithome.com.tw/upload/images/20200920/20115941rgmvAbXWHy.jpg

標題

在head標籤內的title裡面的內容指的就是你頁籤上的標題

<title><%= htmlWebpackPlugin.options.title %></title>

<%= htmlWebpackPlugin.options.title %> 這串預設指定的是我們的專案名稱

我們有兩種方式去修改他

package.json

還記得前面一開始說到我們是使用npm管理我們的套件和專案的嗎?
** package.json中就是我們專案的設定檔 ** (筆記),
用來說明我們要用那些套件、版本號、專案名稱...等。

  1. 打開專案底下的package.json
  2. 在檔案最上方附近找到
name:"myvueproject",
  1. 修改name的屬性(後面雙引號內的文字)
name:"mytitle1",
  1. 存檔(ctrl + s)
    https://ithelp.ithome.com.tw/upload/images/20200920/20115941sQXKf3uvZ3.jpg

https://ithelp.ithome.com.tw/upload/images/20200920/20115941XPiL2qmGWp.jpg

上述操作的name其實就是我們的專案名稱,所以一般來說不會修改這邊當作你的title。
而且這種方式有一個小小的問題,就是專案名稱一般建議是使用小寫英文+數字
所以通常這邊的設定我們不會去寫大寫英文或是中文...,
(有興趣的小夥伴可以試試看,使用小寫英文+數字發生甚麼事)
那如果我們需要其他種類的標題怎麼辦哩?

vue.config.js

vue.config.js ,這隻檔案顧名思義就是 vue 的設定檔。
像是Server(host、port、proxy、是否使用https)、和環境變數(outputDir、assetsDir、indexPath...)
....等配置,對一些Vue專案中配置做修改的時候都會用到它。
(這部分的內容有點多有興趣的小夥伴可以上Vue官網上去查閱 :https://cli.vuejs.org/zh/config/)

  1. 對我們的專案按下右鍵 > 新增檔案
    https://ithelp.ithome.com.tw/upload/images/20200920/2011594116K0jCxtsf.jpg
  2. 命名為 vue.config.js
  3. 檔案內輸入下方程式碼
module.exports = {
    chainWebpack: config => {
      config
        .plugin('html')
        .tap(args => {
          args[0].title= '我的標題Title2'
          return args
        })
    }
  }

https://ithelp.ithome.com.tw/upload/images/20200920/20115941Vl0tOvXdvX.jpg
4. 在Terminal 按下 (ctrl + c),再輸入Y 關閉原本的 服務
5. 在Terminal 輸入(按一下↑鍵其實也可以)

$ npm run serve

https://ithelp.ithome.com.tw/upload/images/20200920/20115941xaMWDYXkpJ.jpg

若想改其他標題的話可以修改args單引號內的片段

 args[0].title= '可從這邊修改標題'

到這邊有寫過一點html或是剛開始接觸網頁的人就會有個疑問,
為什麼html上沒看過 <%= %> 這種的tag?
(別急答案就在下面)

Html 與 Vue

從前從前有個很懶惰的主管小張,
他想要生產一杯用玻璃杯裝的牛奶;牛奶裡面要有椰果跟巧克力脆片;
為了添加一點風味,椰果裡面還要包著松露。
於是他寫了一份簡單的規格書:

<玻璃杯>
 <牛奶>
  <椰果>
   <松露>
   </松露>
  </椰果>
  <巧克力脆片>
  </巧克力脆片>
 </牛奶>
</玻璃杯>

於是他把這份規格書交給了小羽,
小羽回去就稍微把這份規格書整理了一下:
https://ithelp.ithome.com.tw/upload/images/20200920/20115941nWKSycbbzC.jpg
做成了這個樹狀圖
交給了軒軒廠商請他做出來。

這故事中小張扮演的角色其實就是html檔案,
** html檔案其本質就是一個有特定格式的文字檔 ** ,
而小羽所飾演的角色就是DOC(Document Object Model)
** 負責把這些文字轉換成瀏覽器看得懂的一個樹狀圖物件 **
最後軒軒就是我們的瀏覽器, ** 將這些樹狀圖物件編譯成我們所看到的畫面 ** 。
所以當使用不同瀏覽器(廠商)去瀏覽(生產)同一個畫面(產品),有時就會出現有一點不同的狀況。

了解完Html的運作後,** 那為什麼專案內又有.vue的檔案? **
哪有那麼多為什麼,用就對了
這時候就要歸功於 Vue cli了,
他會將我們專案內的 .vue 等檔案轉譯標準html文件,最後再讓瀏覽器去呈現出來。
而我們的index.html也是作為template(vue檔案中的樣板)被渲染出來,所以我們能在
index.html中使用非原生html的語法 (前面提到的 <%= %> 這個Tag)。

Vue Application

最後我們要進入Vue之前當然要來找找Vue的進入點。

  1. 首先我們先看到index.html
  2. 找到
<div id = "app"><div>

https://ithelp.ithome.com.tw/upload/images/20200920/201159411Hgqx2TrdJ.jpg

咦? 奇怪為什麼裡面甚麼都沒有?

其實,在我們執行Vue專案的時候除了會幫我載入 index.html外,
還會幫我載入另一隻程式 - main.js

  1. 打開main.js
    https://ithelp.ithome.com.tw/upload/images/20200920/20115941l7SGqZto00.jpg

我們可以看到圖中的第四行

createApp(App).mount('#app')

這行程式碼 是將App.vue的內容顯示到id = 'app' 的tag裡面,
從這裡開始就是我們進入Vue開發的起點了。
終於走到路口了


結語

我們在這篇介紹了一些比較硬的架構,
是為了讓我們比較符合俗話說的萬事起頭難的意境。
這篇實則不太容易,如果不太能理解的小夥伴,可以等之後再回頭看。
(不會影響之後的學習)

之後會開始介紹Vue 中的Template、script、和style。


上一篇
【I Love Vue 】 Day 05 愛上 Vue- 環境建置(四) - 聰明的VSCode
下一篇
【I Love Vue 】 Day 07愛上 Vue- Template與 Hot Reloading
系列文
【I Love Vue】 30天愛上 Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言