iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0
自我挑戰組

與Vue相遇系列 第 10

Day010-Vue CLI

猶如昨日的期待,我很興奮地按照了Vue的指示:

  1. 先到node官網下載,下載完成後,立刻安裝
    https://ithelp.ithome.com.tw/upload/images/20200924/201306543xPAo48CfX.jpg
    2.打開command line
    並輸入npm install -g @vue/cli
    https://ithelp.ithome.com.tw/upload/images/20200924/20130654tbNkTgBe1G.jpg
    3.接著,就可以開始開啟新的專案了:
    可以透過指令,建立新的專案:vue create <專案名稱>
    https://ithelp.ithome.com.tw/upload/images/20200924/201306548o6uIxsT9K.jpg
    基本上可選擇default版本(專案執行時,可依據需求再增加)
    https://ithelp.ithome.com.tw/upload/images/20200924/20130654DijZPwqg1B.jpg
    如果不使用default版本,可以透過Manually來一一選擇我們需要的專案內容。
    https://ithelp.ithome.com.tw/upload/images/20200925/20130654tplL1VLTJs.jpg
    其差異如下:
  2. default版本較為簡單,系統並不會自動幫你建置router等,需要在後面開發時,自行建立。
  3. 手動建立時,可選擇下列這些選項。根據專案所需,Vue CLI可自動幫你建立完成:
  • Babel------------------------Babel不用擔心JS語法較新,而無法支援舊版瀏覽器
  • TypeScript-----------------原本JS型別較弱,利用TypeScript可以增強型別
  • PWA Support-------------主要改善用戶體驗,這邊不多加說明
  • Router----------------------Router是框架語言中重要的一環,後續也會探討此部分
  • Vuex------------------------Vuex為重要存取資料概念!!後續也會加以探討
  • CSS Pre-processors----CSS 的預處理
    這裡我們先以:Babel、Router、Vuex、CSS Pre-processors
  1. 透過CLI,當我們有使用此次專案後,可以儲存為下次(同性質),就不用再次重新選擇。
    https://ithelp.ithome.com.tw/upload/images/20200925/20130654EWeIYyKAKe.jpg
    npm系統也會詢問是否要用Vue2還是用最新的Vue3:
    https://ithelp.ithome.com.tw/upload/images/20200925/20130654wyguulHtkL.jpg
    在router的部分,系統也會詢問:Use history mode for router?
    (ps.)router有分兩種:
  • hash router
  • history router
    (本次探討以hash router為範例)
    npm系統也會在此時詢問需要架設哪一種css預處理:
    https://ithelp.ithome.com.tw/upload/images/20200925/201306549BCjU2ei6H.jpg
    並且,選擇In dedicated config files來安裝 Babel及ESlint:
    https://ithelp.ithome.com.tw/upload/images/20200925/20130654tA5Dj0pdR1.jpg
    最後,系統也會再次詢問,本次規劃的專案是否儲存起來,以供下次所需用:
    https://ithelp.ithome.com.tw/upload/images/20200925/20130654x9zzLJZDG3.jpg

安裝完成後,接著進入專案資料夾,並且鍵入: npm run serve
https://ithelp.ithome.com.tw/upload/images/20200924/20130654zi6HHvW7vd.jpg
最後,只要在瀏覽器上輸入上述網址,即可開啟!!**http://localhost:8080/**
https://ithelp.ithome.com.tw/upload/images/20200924/20130654WJD6JXKWp5.jpg
這樣就完成與Vue的聯繫囉~

待續......


上一篇
Day09-watch監聽資料
下一篇
Day011-腳手架介紹
系列文
與Vue相遇30

尚未有邦友留言

立即登入留言