第一步

準備

node版本在12.0.0以上

建立

建立命令：yarn create @vitejs/app my-vue-app --template vue
推薦使用yarn

自帶支援TS

直接將min.js字尾改為ts
vue中的script標籤中加入lang="ts"
將/index.html中的
<script type="module" src="/src/main.js"></script>
改為

配置注入

建立 shims-vue.d.ts檔案
/src/shims-vue.d.ts

declare module '*.css'{
    const classes:{[key:string]:string}
    export default classes;
}
declare module '*.vue'{
    import { defineComponent,FunctionalComponent } from "vue";
    const component:ReturnType<typeof defineComponent> | FunctionalComponent;
    export default component;
}
 

建立tsconfig.json檔案
/tsconfig.json

{
    "compilerOptions": {
      "target": "esnext",
      "module": "esnext",
      // 這樣就可以對 `this` 上的資料屬性進行更嚴格的推斷
      "strict": true,
      "noImplicitAny": true,
      "noImplicitThis": true,
      "strictNullChecks": true,
      "jsx": "preserve",

      "moduleResolution": "node",
      "baseUrl": ".",
      "paths": {
        "@/*":["src/*"]
      }

    },
    "include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.vue"]
  }
 

配置vite.config.js
/vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from  'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias:{
        '@':resolve(__dirname,'./src'),
    },
  },
});