閱讀前，建議可以參考Day1：閱讀指南＆為何選擇這個題目？

▌挑戰簡介

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

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

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

▌目前為止的課程心得

大致看了一下「Vue2.0+Node.js+MongoDB 全棧打造商城系統」這門課程，教得飛快，非常不適合連VueJS都不適合的新手。如果想學Vue，還是建議去上六角學院的「Vue出一個電商網站」，這門課會把原理講的很仔細。

▌VueCLi的介紹與執行

課程一開始就開始交我們安裝VueCLi

• VueCLi 是什麼?
  • Vue.js 官方提供的開發工具，可以幫你創建好許多本來要自己弄的資料夾、檔案。
  • 基於Webpack建制的開發工具
  • 便於開發SPA的網站（相反的不適合開發非SPA網站）

不建議不會Vue的新手一上來就使用VueCLi （因為看不懂那些生出來的資料夾在衝三小XDD）

• 為什麼要Vue Cli?
  • 因為很方便Ｒ（別人幫你把需要的資料都生出來了，多方便）

(觀念)SPA是什麼

SPA（Single Page Application）是相對 MPA（Mutiple Page Application）

SPA會把一些傳統中是後端處理的東西辦到前端（例如：管理路由路徑）

• 在MPA當中，許多路徑對應許多的頁面。比如說
  • 「首頁」對應http://www.nissen/index.php
  • 「商品」對應http://www.nissen/form.php
  • 「留言」對應http://www.nissen/comment.php
  • 就像大部分網站，你點「首頁」就重新刷新頁面，連結到index.php
• 在SPA中，所有東西都出現在同個頁面。比如說
  • 「首頁/商品/留言」都在同一個http://www.nissen/index.html
  • 就像使用Gmail讀信、寄信都在同個頁面，不會重新刷新網頁，使用者體驗起來覺得很開心
  • 缺點：不利於SEO（搜尋引擎爬不到你的網站內容，因此你的網站也不容易被使用者搜到）

推薦文章：跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR

VueCli安裝

• 記得要先安裝nodeJS的環境
• 打開terminal輸入

npm install -g vue-cli  //安裝vue cli

• 安裝好VueCli後，就可以使用相關的terminal指令

vue // 可以看vue cli提供什麼command line
vue list //可以看有什麼套件
cd 到想要的資料夾＋vue init <<template>> <<自訂名稱>> //template名稱可以從list看

跑完上面的內容後，他就會提示說

cd XXXX //切換到<<自訂名稱>>資料夾
npm run dev //開始運行vue cli環境

然後顯示

http://localhost:8080   

打開網址去到localhost:8080，就會看到網站成功部署上去了。

參考資料

• 跟著小明一起搞懂技術名詞：MVC、SPA 與 SSR
• 六角學院：Vue出一個電商網站
• Vue2.0+Node.js+MongoDB 全棧打造商城系統