iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

30 天我與 Vue 的那些二三事系列 第 3

Day 3 - Vue的專案結構

除了可以用CDN(Content Delivery Network)的方式來引入Vue之外,我們還可以使用Vue CLI來快速建立專案,這裡Grant採用第二種方式,這樣會使我們的專案比較有結構性。

安裝完Vue CLI之後,我們就可以使用以下command來建立初始專案。

vue create hello-world

建立完初始專案後,我們來看一下Vue的專案架構。
https://ithelp.ithome.com.tw/upload/images/20210918/20128925gFi2ahLYXa.png

  • dist: 我們在進行專案release時,通常會透過一些打包工具將專案程式碼進行打包,也就是說將富複數的程式碼檔案打包為一個檔案,這個動作不但可以使你的網站最小化,也可以優化程式碼的執行效能。這個資料夾存放的是透過webpack打包完之後的程式碼。
  • public: Vue 應用程式會透過這個 HTML 頁面來運行整個專案。
  • src/assets: 通常會用來存放專案的靜態檔案,例如圖片、CSS等等。
  • src/components: 這個資料夾就是用來存放vue的component囉,也就是樣板(template)或是其他元件。
  • App.vue: 這是 Vue 應用程式的根節點元件,我們會透過這個Vue template去引用其他的components。
  • main.js: 這是應用程式的進入點。目前,這個檔案會初始化你的 Vue 應用程式並定義要將應用掛載到 index.html 檔案中的哪個 HTML 元素。通常還會在這個檔案註冊全域性元件或載入其他 Vue 函式庫。

這就是Vue框架的目錄結構,明天我們將會開始學習Vue的基本語法。


上一篇
Day 2 - Vue與MVVM
下一篇
Day 4 - 資料綁定與模板語法
系列文
30 天我與 Vue 的那些二三事30

尚未有邦友留言

立即登入留言