使用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'
    }
  }
})