今天來做一些基礎設定以及將專案啟動吧～

卸載 TypeScript

ionic 的專案會自動使用 TypeScript，如果不想用的話也可以卸載。

• 首先輸入

  npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript vue-tsc
  

• 然後將 src/router/index.ts 以及 src/main.ts 檔案改成 .js
  

• 以及 index.html 裡匯入的 <script> 也要更改為 main.js
  

• 刪除 vite-env.d.ts，進入.eslintrc.js 刪除 @vue/typescript/recommended 和 @typescript-eslint/no-explicit-any: ‘off’
  

• 進入 src/router/index.js 中刪除 Array<RouteRecordRaw> 以及 import { RouteRecordRaw } from 'vue-router'
  

• 在 src/App.vue 以及 src/views中自動產生的預設模板都要移除 <script> 中的 lang="ts"

• 刪除 tsconfig.json

• 在 package.json 中，將 build": "vue-tsc && vite build 改成 build": "vite build

• 最後輸入 npm i -D terser

呼，早知道還是用 TypeScript 了！

來啟動吧！

輸入 ionic serve，跑跑看～

喔耶！成功了！

VS Code Extension

vscode 有 Ionic 的延伸模組這個酷東西可以安裝喔！

之後要開新專案，只要按左邊的 Ionic 圖示，就可以快速開起專案！以及設置相關設定！

若已經開好專案了，也可以一鍵啟動、Debug，還有產生 QRcode 讓手機可以直接掃了打開 Nexus Web Browser (記得手機要先安裝 Nexus Web Browser)

wow～ 詳細內容可以看官網的說明：Ionic VS Code Extension