iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
1
自我挑戰組

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

Day3:VueCli是什麼?怎麼安裝VueCli

閱讀前,建議可以參考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?
    • 因為很方便R(別人幫你把需要的資料都生出來了,多方便)

(觀念)SPA是什麼

SPA(Single Page Application)是相對 MPA(Mutiple Page Application)

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

  • 在MPA當中,許多路徑對應許多的頁面。比如說
  • 在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,就會看到網站成功部署上去了。

https://ithelp.ithome.com.tw/upload/images/20181016/20112011aldOppOqiu.png

參考資料


上一篇
Day2:如何不用VueJS實現雙向數據綁定?
下一篇
Day4:VueCli下的資料夾介紹
系列文
三十天用Vue.jS打造一個網路商城30

尚未有邦友留言

立即登入留言