vue 專案建置 - Frank0321/taiwan_reservoir GitHub Wiki

vue 專案建置

vue 建置專案的方式有兩種 :

這邊主要介紹以 cli 的方式來建置專案

環境確認

確認是否有安裝好以下的程式

  • node
  • yarn / gridsome
  • git 可用 cmd 確認是否有安裝
$ node -v
$ yarn -v / $ gridsome -v
$ git -version

使用 cli 建置專案

Step 0

使用 cmd 的方式進行操作

  1. 移動到要建置專案的目錄
  2. 建置專案
$ cd playground  //移動到平常放專案的地方
$ vue create my-project //my-project是自己取的專案名稱

Step 1 : Please pick a preset

  • 選擇 Manually select features

Step 2 : Check the features needed for your project

建議選擇以下 :

  • Babel
  • Router
  • Vuex
  • CSS Pre-processors (你要用sass就要選起來)
  • Linter / Formatter (多人協作的話,最好是選起來,統一大家程式碼)

Step 3 : Choose a version of Vue.js that you want to start the project with

  • 選擇 2.x,目前專案預計以 vue2 進行開發

Step 4 : Use history mode for router?

  • 網頁的路徑要不要顯示
  • 選擇Y

Step 5 : Pick a CSS pre-processor

  • 選擇Sass/SCSS (with node-sass)

Step 6 : Pick a linter / formatter config

  • 檢查與排版
  • 選擇ESLint + Prettier

Step 7 : Pick additional lint features

  • 選擇Lint on save,儲存時就自動檢查排版

Pick a unit testing solution

  • 如果在 Step2 有選擇 unit Testing,則會多這個選項
  • 選擇 Jest

Step 8 : Where do you prefer placing config for Babel, ESLint, etc.?

  • 選擇In dedicated config files
  • 全部都獨立的設定檔比較好管理

Step 9 : Save this as a preset for future projects?

  • 將目前的建制方式儲存起來
  • 選擇N,不確定日後會不會修改建置方式

待更新

設定prettier

自動化排序.vue 檔內的Component/instance順序

axios設定

設定環境變數

參考資料