iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
1
自我挑戰組

三十天用Vue.jS打造一個網路商城系列 第 4

Day4:VueCli下的資料夾介紹

  • 分享至 

  • xImage
  •  

閱讀前,建議可以參考Day1:閱讀指南&為何選擇這個題目?

▌挑戰簡介

  • 題目:三十天用Vue.jS打造一個網路商城

  • 挑戰內容:利用慕課網(IMOOC)的「Vue2.0+Node.js+MongoDB 全棧打造商城系統」的課程嘗試在30天內打造網路商城。

  • 本篇性質:純粹學習進度的紀錄,不會有詳細的教學或解釋,因此不適合認真閱讀

▌VueCLi的環境運行與資料夾

運行「開發環境」

每次要開發的時候,就要運行以下指令

npm run dev  //運行「開發環境」

大致的資料夾如下

  • index.html:首頁,用不太到,VueCli會幫忙把資料注入該檔案。
  • build(基本用不到,不管他):webpack的原始檔
  • config(基本用不到,不管他):寫vue會用到的設定檔
  • node_moduls:各種開發工具
  • src(最重要的東西放這裡):重要的檔案包括main.jsApp.vue裡面的asset可以放會被編譯的檔案
  • static:放入不會被編譯的檔案
  • test

https://ithelp.ithome.com.tw/upload/images/20181017/20112011bEA5k1PR4z.png

npm run build //運行「正式環境」

如果選擇使用npm run build,就會打包出出dist(給後端用的)

運行「正式環境」

npm run build //運行「正式環境」

當開發完後,使用npm run build,VueCli就會幫忙打包出出dist(給後端用的)
然後該打包出的html,只能運行在http環境


上一篇
Day3:VueCli是什麼?怎麼安裝VueCli
下一篇
Day5:Vue Router設定
系列文
三十天用Vue.jS打造一個網路商城30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言