前提條件：

1. 已安裝nodejs環(huán)境（Tips：Vite 需要 Node.js 版本 >= 12.0.0）
2. 已安裝yarn

使用Vite搭建Vue的TypeScript版本的時(shí)候，可以使用Vite自帶的模板預(yù)設(shè)——vue-ts。

Tips：在Vue3的單文件組件(SFC)中粱挡，<script>已經(jīng)很好的支持TypeScript，只需要把標(biāo)簽的lang屬性設(shè)置為ts即可（<script lang="ts">...</script>(原文)）智听。

1. 搭建Vue3(ts)基礎(chǔ)環(huán)境

執(zhí)行命令行：

# npm 6.x
npm init vite@latest PROJECT_NAME --template vue-ts

# npm 7+, 需要額外的雙橫線：
npm init vite@latest PROJECT_NAME -- --template vue-ts

# yarn
yarn create vite PROJECT_NAME --template vue-ts

2. 安裝Vue-Router

執(zhí)行命令行(安裝最新版本)：

# npm
npm install vue-router@next
# yarn
yarn add vue-router@next

Tips：

1. 在Vue3版本下绢片，建議使用Vue-Router4（原文）语泽。
2. 如需要自定義相應(yīng)版本焦履，將@后next改為對(duì)應(yīng)版本號(hào)即可拓劝。

2.1 創(chuàng)建相應(yīng)文件

router.ts

import { createRouter, createWebHistory } from 'vue-router'

export default createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: () => import('./views/Home.vue')
    },
    // ...其他路由配置
  ]
});

3. 安裝Vuex

執(zhí)行命令行(安裝最新版本)：

# npm
npm install vuex@next
# yarn
yarn add vuex@next

Tips：

1. 在Vue3版本下，需要使用Vuex4才能夠正常使用（原文）裁良。
2. 如需要自定義相應(yīng)版本凿将，將@后next改為對(duì)應(yīng)版本號(hào)即可校套。

3.1 創(chuàng)建相應(yīng)文件：關(guān)于this.$store

Vuex 沒(méi)有為 this.$store 屬性提供開(kāi)箱即用的類(lèi)型聲明价脾。如果你要使用 TypeScript，首先需要聲明自定義的模塊補(bǔ)充(module augmentation)笛匙。

為此侨把，需要在項(xiàng)目文件夾中添加一個(gè)聲明文件來(lái)聲明 Vue 的自定義類(lèi)型 ComponentCustomProperties。

vuex.d.ts

// vuex.d.ts
import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

declare module '@vue/runtime-core' {
  // 聲明自己的 store state
  interface State {
    count: number
  }

  // 為 `this.$store` 提供類(lèi)型聲明
  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

當(dāng)使用組合式 API 編寫(xiě) Vue 組件時(shí)妹孙，您可能希望 useStore 返回類(lèi)型化的 store秋柄。為了 useStore 能正確返回類(lèi)型化的 store，必須執(zhí)行以下步驟：

1. 定義類(lèi)型化的 InjectionKey蠢正。
2. 將 store 安裝到 Vue 應(yīng)用時(shí)提供類(lèi)型化的 InjectionKey 骇笔。
3. 將類(lèi)型化的 InjectionKey 傳給 useStore 方法。

store.ts

// store.ts
import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'

// 為 store state 聲明類(lèi)型
export interface State {
  count: number
}

// 定義 injection key
export const key: InjectionKey<Store<State>> = Symbol()

export const store = createStore<State>({
  state: {
    count: 0
  }
})

// 定義自己的 `useStore` 組合式函數(shù)
export function useStore() {
  return baseUseStore(key)
}

4. main.ts文件配置

main.ts

import { createApp } from 'vue'
import router from './router'
import { store, key } from './store'
import App from './App.vue'

const app = createApp(App)

app.use(router)
app.use(store, key)
app.mount('#app')

5. Vuex和Vue-Router的使用

在main.ts已經(jīng)聲明配置過(guò)Vuex和Vue-Router之后，在<script setup lang="ts">或者<script lang="ts">中按需導(dǎo)入store和router即可使用其屬性和方法笨触。

6. 補(bǔ)充

6.1 Vue-Router路由自動(dòng)處理

參考：https://github.com/pohunchn/vite-ts-quick

router.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"

function getRoutes() {
    const { routes } = loadRouters();
    /**
     * routes處理部分
     */
    return routes;
}

const router = createRouter({
    history: createWebHashHistory(),
    routes: getRoutes()
})

export default router;

/** 自動(dòng)化處理view目錄下的文件生成為路由 */
function loadRouters() {
    const context = import.meta.globEager("../views/**/*.vue");
    const routes: RouteRecordRaw[] = [];

    Object.keys(context).forEach((key: any) => {
        if (key === "./index.ts") return;
        let name = key.replace(/(\.\.\/views\/|\.vue)/g, '');
        let path = "/" + name.toLowerCase();
        if (name === "Index") path = "/";
        routes.push({
            path: path,
            name: name,
            component: () => import(`../views/${name}.vue`)
        })
    });

    return { context, routes }
}

7. 相關(guān)鏈接

• 官方相關(guān)ts項(xiàng)目示例：vite-ts-quick - Vue 3 + Vuex + Vue-router + TypeScript Quick Template.
• 官方相關(guān)項(xiàng)目示例：Awesome Vite.js