vue-cli3.0腳手架+typescript專案建立

囧囧圖圖發表於2018-08-08
VueTypeScript

1, node使用最新版本,不是的可以去官網下載

node.js官網

vue-cli3.0腳手架+typescript專案建立

2, 使用命令升級到vue3.0: npm i -g @vue/cli

vue-cli3.0腳手架+typescript專案建立

vue-cli3.0腳手架+typescript專案建立
3, 建立專案資料夾,輸入命令: vue create vue-project

vue-cli3.0腳手架+typescript專案建立

  • default (babel,eslint)預設套餐,提供babel和eslint支援
  • Manually select features手動去選擇需要的功能
  • 可以使用上下方向鍵來切換選項

4, 選擇配置

vue-cli3.0腳手架+typescript專案建立

vue-cli3.0腳手架+typescript專案建立
5, 確認選擇的配置

vue-cli3.0腳手架+typescript專案建立
6, 選擇css預處理

vue-cli3.0腳手架+typescript專案建立
7, 選擇TSLint或者ESLint規則,這個看個人喜好或者公司規定
vue-cli3.0腳手架+typescript專案建立
8, 選擇語法檢查方式,這裡我選擇儲存就檢測
vue-cli3.0腳手架+typescript專案建立
9, 選擇單元測試解決方案,隨意
vue-cli3.0腳手架+typescript專案建立
10, 把babel,postcss,eslint這些配置檔案放哪,這裡隨便選,我選擇放在獨立資料夾
vue-cli3.0腳手架+typescript專案建立
11, 是否儲存配置,N不記錄,Y記錄並且輸入儲存名字
vue-cli3.0腳手架+typescript專案建立

12, 都確認之後,等待下載依賴,下載之後有完成提示操作

vue-cli3.0腳手架+typescript專案建立
13, 輸入 npm run serve 開始執行專案
vue-cli3.0腳手架+typescript專案建立

專案執行成功,大概就是這樣

相關文章