vue3+vite+ts项目

一、vite搭建项目

1. 安装vite环境

npm init @vitejs/app

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

npm init @vitejs/app policy

3. 执行上面命令后选择vue - ts
   

4. 项目创建完成，运行项目
   

二、vue-router

1. 安装vue-router

npm install vue-router@4 --save

2. 配置路由

// src/router/index.ts
import {createRouter, createWebHistory, RouteRecordRaw } from "vue-router"
const history = createWebHistory();
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'home',
        component: () => import('../views/home.vue') // 路由懒加载
    }
]
const router = createRouter({
    history,
    routes
})

export default router

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

三、vuex

1. 安装vuex

npm install vuex@next --save

2. 配置

// src/store/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

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

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

四、配置vite.config.ts