iT邦幫忙

2021 iThome 鐵人賽

DAY 2
1
Modern Web

Vue.js 什麼意思系列 第 2

Day 02:Vue 個專案先

本篇以 Vue CLI 開始這一回合。

Vue CLI 提供快速建置的開發環境,使用者只需透過簡易設定選擇組隊工具,之後再輸入指令便能操作基本的運行功能;如此主要讓使用者能夠聚焦在開發專案,省去事前研究或取捨工具配置的時間,當然後續也能再依專案需求自行調整配置選項。

首先,依官網指示進行全域安裝

npm install -g @vue/cli

檢查安裝版本,並確認是否有安裝成功

vue --version

接著就可以建立專案囉!

vue create <project-name>

建立專案,組織艦隊

本系列會以書目清單作為範例,因此來取個應景的專案名稱

vue create bookshelf

接著依序下列步驟,選擇專案需求的工具與配置

  1. 選擇預設:前兩個分別是 Vue 2 和 Vue 3 的基本款組合,只包含 babel 和 eslint 而已
    → 本專案選擇第三個選項,手動組織豪華艦隊
    pick a preset

  2. 選擇功能:基本款 Babel 和 Linter 幫你勾好了,其他就依專案需求自選組合
    → 本專案加購 Router、Vuex、CSS Pre-processors(for Sass)
    check features

  3. 選擇 Vue 版本
    → 本專案以 Vue 2 開發
    choose a version of Vue.js

  4. 路由配置是否選擇 History mode
    → 選擇 History mode,大寫字母通常也是建議選項
    router mode

    • n-hash mode:使用 # 模擬 url,例如 www.example.com/#/home,井字號後面的路由變化不會向 server 發出請求,因此頁面不會重新載入
    • Y-History mode:顯示一般的 url,例如 www.example.com/home,路由變化利用 history.pushState API 就能完成 URL 跳轉,一樣不會重新載入頁面
  5. 選擇前置處理器
    → 本專案使用 dart-sass
    pick a CSS pre-processor

  6. 選擇 linter / formatter:基本設置 ESLint 用來檢查語法,Formatter 用來統一程式碼格式
    → 本專案使用 ESLint + Prettier
    pick a linter / formatter config

  7. 選擇 lint 功能:選擇檢查時機
    → Lint on save,在儲存時立即檢查語法
    pick lint features

  8. 選擇設置檔存放位置
    → In dedicated config files,讓配置檔各自獨立,有需要再建立配置檔即可
    place config

  9. 日後是否以本次選擇作為通用預設選項
    → 當然是先不要喔!未來因應不同專案需求可能會改變選項,再次看到大寫 N 給它選下去
    save preset

開啟專案

以上設定完成之後,差不多等個半分鐘,讓 Vue CLI 建置一下你剛才所選擇的艦隊環境,最後看到下圖這段文字,就代表你的專案已建置完成,可以用指令開啟它了!
successfully create vue project

移動前往專案根目錄

cd bookshelf

透過在 package.json 裡的 scripts 指令啟動伺服器來運行專案

npm run serve

接著點選本地端 localhost 位址,就會看到 Vue 公版頁面,大功告成!
localhost

參考資料


上一篇
Day 01:新手視角
下一篇
Day 03:觀察資料夾
系列文
Vue.js 什麼意思30

1 則留言

0
Chiahsuan
iT邦新手 4 級 ‧ 2021-09-18 14:49:55

超詳細~~收起來!!!/images/emoticon/emoticon32.gif

Teen iT邦新手 5 級 ‧ 2021-09-19 11:29:45 檢舉

耶~/images/emoticon/emoticon25.gif

我要留言

立即登入留言