iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

我的菜很有Vue味~系列 第 28

Day28 Vue CLI建立的專案結構

今天的話來簡單介紹一下CLI的各個資料吧。

  • node_modeules :node 相關的套件
  • public :公開檔案目錄
  • src :原始碼目錄,主要都在這裡進行開發
  • assets : 靜態檔案的預設目錄
  • componets : 元件檔案的預設目錄
  • main.js : Vue 專案的預設進入點
  • balbel.config.js : babel 設定檔
  • package.json : 專案、相依套件設定檔

其中應該還會有一個dist的資料夾,通常是用來存放打包後的檔案,因為我們還沒打爆所以現在看不到。
現在我們把/src/main.js打開後應該會長這樣,裡面的#app是掛載在/public/index.html裡面。

index.html裡的<div id="app"></div> 就是 Vue 實體掛載的目標。

昨天我們輸入npm run serveyarn sreve預設就是從這裡進入應用程式,main.js裡的App.vue檔就是我們的根元件。
在這裡我們不用<script src="...">引入Vue或JS檔,因為CLI會自動找到對應的檔案。

今天就先到這了,明天見~


上一篇
Day27 Vue CLI 介紹
下一篇
Day29 Vue CLI環境設定與打包
系列文
我的菜很有Vue味~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
juck30808
iT邦研究生 1 級 ‧ 2021-10-12 18:33:44

恭喜即將完賽!!!

我要留言

立即登入留言