Vite 配置 vue-router 和 vuex

安装相应依赖

# 安装依赖
yarn add vue-router@next vuex@next

创建目录结构

基础文件配置

router/index.ts

import { createRouter, createWebHashHistory, createWebHistory } from "vue-router";
import Home from '../views/Home.vue'

const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: "/demo",
    name: "demo",
    component: () =>
      import(/* webpackChunkName: "demo" */ "@/views/demo/Demo.vue"),
  },
];

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

export default index;

store/index.ts

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

入口文件配置

main.ts

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

const app = createApp(App)
app.use(store).use(index).mount('#app')

App.vue - 使用 router-view 处理路由

<template>
  <router-view />
</template>

<script lang="ts">
</script>

<style>
</style>