使用vite搭建vue3.0+ts項目

第一部分（vite環境搭建）

1. 安裝vite環境

npm init @vitejs/app 或者 yarn create @vitejs/app

2. 使用vite初始化vue+ts項目

npm init @vitejs/app my-vue-app 或者 yarn create @vitejs/app my-vue-app

3. 執行上面命令后選擇vue - ts

4. 回車后繼續執行

vue3.0 + ts簡單項目便搭建好了， 后續是vue-router配置， vueX的配置， 以及vite.confit.ts文件的配置

第二部分（vue-router搭建）

1. 安裝vue-router

npm install vue-router@4 或者 yarn add vue-router@4

2. 在src目錄下建立router文件夾，然后在router文件夾中創建index.ts文件，文件內容如下

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const history = createWebHistory()
const routes: Array<RouteRecordRaw> = [{
      path: '/',
      name: 'home',
      component: () => import('../views/home/index.vue')
}]
const router = createRouter({
      history,
      routes
})
export default router

3. 在main.ts文件引入

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"

const app = createApp(App)

app.use(router)
      .mount('#app')

第三部分（vueX的搭建）

1. 安裝vueX

npm install vuex@next --save 或者 yarn add vuex@next --save

2. 在 src 目錄下創建一個 store 文件夾， 里面放 index.ts state.ts mutations.ts actions.ts

3. 在 index.ts 中

import { createStore, } from "vueX";
import state from './state'
import mutations from './mutations'
import actions from './actions'
const store = createStore({
      state,
      mutations,
      actions,
      modules: {

      }
})

export default store

4. 在 main.ts 中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
import store from './store'
const app = createApp(App)

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

第四部分（vite.config.ts）設置別名

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

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