最近在學習vue3，在學習了基礎知識之后，開始自己動手寫一個基礎的項目框架，以下為搭建的過程。
1. 安裝
這次選擇用vite，據說加載速度特別快，所以我也來試試。根據vite官方文檔來新建項目：
因為這次要用到typescript，所以我選擇的命令是：
npm init @vitejs/app vue-template-ts --template vue-ts
等待創建好了之后，直接npm install， 然后npm run dev啟動項目，此時一個基礎的項目就啟動了。查看文件可以看到，main.js變成了main.ts，其他的js文件也改為了ts格式，還多了兩個文件：shims-vue.d.ts 和vite.config.ts
shims-vue.d.ts 的作用是幫助ts識別vue文件。vite.config.ts是vite提供的配置文件，替代了vue.config.js。
內容如下圖：
基本的框架運行起來了，我們開始為真正的搭建項目做准備，首先安裝axios、vuex 和vue-router,安裝最新版就好了。
2. 基本配置
然后配置alias和相關代理
這里要注意，直接使用require會提示錯誤，是因為require是node環境里的，所以會提示我們安裝： ‘@types/node’，然后我們需要在tsconfig.json里添加如下代碼：
這樣就可以使用require了。然后axios的代理也是在vite.config.ts里設置的，注意是在server下面，這個可以參看vite的配置文檔，有說明。
optimizeDeps: {
exclude: ['vuex']
},
這里定義了兩個模塊的state類型，StateUser和LoadingStateTypes，然后通過RootStateTypes將所有的類型匯總並導出，
然后在index.ts中創建store
這里其實比較簡單，有些我測試的時候引入的模塊，但是后面我沒有用，就可以不用管，這里和vue2.0的區別在於，以前是直接從vuex中引入store，然后通過vue.use(store)掛載，現在是從vuex中引入createStore，通過這個方法創建store，並在main.ts中引入這個文件，通過app.use(store)進行關聯。
然后再看modules下面的各個模塊的文件如何寫，loading.ts比較簡單，就不說了，app.ts里比較全面，就以這個為例：
首先引入了獲取token相關的文件，然后是定義了一個接口StateUser，就是interface.ts里引入的state類型。
接着跟vue2.0差不多，定義state、mutations和actions，要注意在mutations里的state類型和actions里commit的類型，此處我從vuex里引入了Commit類型。通過context拿到了commit，最后將這個模塊導出。
*注意：在使用store的時候有點兒區別，首先是在vue使用：
通過引入useStore獲取store，然后其他就正常使用了。
如果是在ts文件中，則不能這樣使用，通過useStore拿不到store，結果是undefined。所以在ts文件中，我們這樣使用：
這里是路由攔截的代碼，通過直接引入之前編寫的store下面的index.ts文件，可以直接拿到store。
4. vue-router 先看看目錄
接着說路由相關的代碼，代碼在index.ts。此處也不用通過vue.use(router)了，通過上圖可以看到，我們通過從"vue-router"中引入“createRouter”和“createWebHashHistory”創建了router並設置history模式為hash。
然后是config.ts這里沒有太多好分析的，主要是引入modules下面的路由模塊。
單獨的路由模塊頁面，和vue2沒有啥區別：
5. axios請求
這里簡單的封裝了一下axios請求：
這里定義了請求頭，並通過declare module ‘axios’擴展了AxiosRequestConfig， AxiosRequestConfig是axios請求頭的類型，在ts中，如何直接給請求配置config里添加“actionKey”等參數是會報錯的，原因是AxiosRequestConfig里沒有定義這些字段，所以通過擴展，使AxiosRequestConfig有了這些字段。
這里只是簡單的判斷了一下，請求前token是否存在，以及是否需要判斷loading，是否需要全局提示等。
6. 補充
最后補充一下hooks，這個是vue3的重頭戲，這里我只簡單的寫了一個，就是loading的判斷：
vue3.0允許我們在ts文件里使用computed、ref等響應式方法，在login里引入
以上就是簡單的一個vue3.0項目模板。