這次想用部落格整理一下之前學Vue時，手寫的筆記。
一方面也當作是一個複習~
對Vue有興趣的人，也許也可以跟著我這次複習的腳步，
稍微認識一下Vue這個框架怎麼使用。
另外，因為內容很多，所以這次的Vue學習筆記預計會分多個篇文章進行整理 : )
什麼是Vue？
Vue是一種前端框架，有別於DOM API和jQuery，
Vue可以讓HTML、CSS這些畫面部分與JavaScript的部分分開管理，
且會以資料操控畫面，整體上的效能也比較好。
開始Vue專案的起手式
首次開始Vue專案前，我們會需要先安裝Vue
使用以下的指令，就可以進行安裝
npm install -g @vue/cli
接著使用以下的指令，開啟一個新的Vue專案
vue create 專案名稱
啟動專案的指令則是
npm run serve
完成上面這兩個步驟後，進入這個專案，
會發現裡面有好幾個資料夾及檔案。
專案資料夾及檔案的角色
這邊有兩個資料夾，分別是public和src
public資料夾
這個資料夾裡會有網頁的icon和index.html檔案
html檔案主要是網頁預設的一些內容。
(像是<!DOCTYPE、<head>、<body>標籤)
src資料夾
底下分別有四個部份
1. assets資料夾
主要是放一些靜態檔案，例如圖檔。
2. components資料夾
這個資料夾會放一些元件檔案，使用時，會透過import引入來使用。
3. main.js
這是JavaScript的進入點
'vue'是Vue.js本身，'./App.vue'是整個專案本身。
最底下的$mount('#app')的部的部分，會把內容放入index.html中了<div id="app">裡。
4. App.vue
這個檔案裡又分為三個大部分，分別是template、script、style。
template：html的部分
script: JavaScript的部分
style: CSS的部分
這個檔案以上的設定都會套用到整個專案，可以把這個檔案想像成是一個主元件。
實際進行時還會再另外分出其他元件，
像是一個路由會對到一個頁面的父元件和可以被多個父元件共用的子元件。
*在Vue預設的內容中，引入的子元件是HelloWorld
這次就先看到這個部分，下一篇再進一步來看一下Vue的常用指令~
留言列表
打工仔人森 (3)
