create project
先換一下 Vue CLI 的 package manager
vue config --set packageManager pnpm
開始建立專案吧
vue create front_end
- Pick a preset
這裡我們選擇 Manually select features,去裝好一定會需要用到的套件, 如果選擇 Default,會裝的太簡略,很多很重要的套件像是 vue-router, vuex 都要之後自己再裝。 上下鍵是切換選項,空白鍵是確定選擇,按下 Enter 做下一步設定。
2. Select the features
這裡 Choose Vue version, Babel 要選,本篇以 typescript 開發,所以 Typescript 要選, Router, Vuex 和 CSS Pre-processors 也是非常重要,必選,之後的篇章會再詳細介紹。
3.
class 風格的裝飾器,像原本創建 vue 實例 長得像這樣 home = new Vue() 用裝飾器後會像這樣 class home extends Vue{} 我自己是看不習慣啦,所以不裝。
Use history mode for router 選 no 的話,路由會掛在 # 底下,很醜
原生 CSS 其實不好用,用 CSS 預處理器,樣式好寫很多, 連迴圈, function 都能寫,目前 Sass/Scss 最多人用,Stylus 也蠻好用的, Less 好像有些雷的地方,我自己主要是用 Sass/Scss。
4. Where do you prefer placing config for Babel, ESLint, etc.?
像 babel, eslint 這些套件的設定檔,你想各別存放還是統一寫在 package.json 裡。
5. Save this as a preset for future projects?
之後的專案是否都套用現在的設定?
貼心提醒: 如果你有用 dropbox, google drive 等雲端硬碟在備份的話建議先暫停備份, javascript 有一個黑洞叫做 node_modules,讓我形容一下有多黑
請不要備份 node_modules,專案需要的套件都會記錄在 package.json 或 pnpm-lock.yaml 裡, 之後在別的電腦想裝回這些套件,只要在終端輸入 npm install 或 pnpm install 就可以裝回來了。
如果用 pnpm 當 Vue CLI 的 package mannager 還是有問題,那就換回 npm 吧
進入專案路徑,在終端輸入 npm run serve 就可以把專案跑起來了