iT邦幫忙

0

[鼠年全馬] W24 - Vue心得筆記 - 讓Vue Cli小秘書跟你一起做

最近看到了一個廣告讓我很心動~
圖片已死...

iT邦第12屆鐵人賽要開始拉~~~
好興奮阿!!
我應該會報名吧~不過還沒想好主題就是了~/images/emoticon/emoticon01.gif

請各位多多指教囉/images/emoticon/emoticon41.gif


接著進入今天的正題~
今天要來介紹一個很好用的工具 - Vue Cli

#Vue Cli是什麼?

https://ithelp.ithome.com.tw/upload/images/20200706/20118686rE9zzUZomD.jpg
截自Vue Cli-介紹

特色如下:

  • 基於webpack所建置的開發工具
  • 能夠以非常迅速的方式去設定各種配置
  • 以及快速的引用各種套件
  • 可快速開發SPA(single-page application)網頁

簡而言之, Vue Cli呢 就像一個小秘書, 什麼都幫你川扁扁, 讓老闆躺著領錢(誤), 讓開發人員可以偷懶的好工具, 不論新手老手都愛用的神物/images/emoticon/emoticon01.gif


接著就開始從零開始到建立一個Vue Cli專案吧~

#安裝

要用小秘書之前一定得先將它安置好, 並且給它一個它喜歡的環境, 用起來才會舒服
來看看官網安裝說明
https://ithelp.ithome.com.tw/upload/images/20200706/20118686s1jVuLpxjn.jpg
發現它需要依賴Node.js8.9或更高版本, 所以還沒裝的先去裝好再繼續 ->Node.js傳送門

接著要帶它進來我家摟~

//輸入以下指令就會自動安裝
npm install -g @vue/cli

安裝完畢可以來看看這個小秘書是不是最幼齒的

vue --version

確認後就可以開始來用它囉~/images/emoticon/emoticon12.gif


#建立一個新專案

接下來我們來讓小秘書幫我們做點事~建立一個Vue Cli專案~

vue create hellovuecli

下完指令後, 它會問一些問題後, 會根據我們的答案來設定這個專案

第一個會碰到的問題, 是否要使用預設的設定來建立專案:
https://ithelp.ithome.com.tw/upload/images/20200706/20118686sfJcbnCjqS.jpg
預設的部分包含babeleslint套件, 其他的就沒有了
這邊選第二個, 讓我們自訂看要安裝什麼套件吧~

接著遇到第二個問題, 要安裝哪些套件:
https://ithelp.ithome.com.tw/upload/images/20200706/20118686za9hoVDU44.jpg

  • (O)babel: 可以把ES6語法編譯為ES5
  • (O)Router: Vue-Router套件, 用於切換頁面
  • (X)Vuex: 用於集中管理vue元件的資料狀態, 在大型專案上非常好用
  • (X)Linter / Formatter: 協助檢查程式碼是否正確的工具, 常用在讓不同寫法的開發人員統一規範他們的寫法(註: 此工具六角老師建議新手不要安裝, 以免遭受打擊/images/emoticon/emoticon01.gif)

至於其他的呢 個人目前還沒有遇到會用到它們的地方, 對於初期開發來說, 上面四個套件已足夠
不過我們目前先不用裝VuexLinter / Formatter, 殺雞焉用牛刀, 簡單的專案不需要它們出馬

選好之後就繼續下一步囉~

接著第三個問題, vue-router是否要使用history模式(Y/N):
https://ithelp.ithome.com.tw/upload/images/20200707/20118686adoBGbHZyO.jpg
回答N的話他會設定另一種hash模式
兩種最直觀的差異就是在url後方是否有個 *#*符號
其他的差異這裡不深入研究, 有機會專門寫一篇Vue-Router時再來探討它

再來第四個問題, 剛才選擇要安裝的套件, 要將它們的配置放在哪裡:
https://ithelp.ithome.com.tw/upload/images/20200707/20118686JuIbYEHey5.jpg
第一個是讓他們有各自專用的設定檔
第二個是在package.json集中管理
這邊我們選第二個

最後一個問題, 要不要儲存這些設定, 之後建立專案時可以快速使用:
https://ithelp.ithome.com.tw/upload/images/20200707/20118686GGduHyhwTg.jpg
這裡見仁見智, 我通常會回答N, 因為每一次的專案會用到的可能都不一樣...

再來就等小秘書做完事囉~
https://ithelp.ithome.com.tw/upload/images/20200707/20118686CpSxPpVDRb.jpg

完成後就可以看到我們資料夾裡已經建置好一個完整的專案了
專案架構像這樣
https://ithelp.ithome.com.tw/upload/images/20200707/20118686ITdImn8ElZ.jpg

再來可以試跑看看是不是真的可以用

npm run serve

看到這個頁面就是成功囉!!!/images/emoticon/emoticon12.gif
https://ithelp.ithome.com.tw/upload/images/20200707/20118686JpTIIF9rYg.jpg


今天和小秘書一起做 出一個Vue Cli專案篇就到這~
專案架構的部分這次沒講到, 之後在實作篇會再詳細的寫清楚!!/images/emoticon/emoticon29.gif

  ↓ 整篇精華在這
PS. 今天3倍卷預購最後一天, 大家別忘了去預購喔~ 傳送門
  ↑ 整篇精華在這


尚未有邦友留言

立即登入留言