vite+vue3+vue-router+vuex

vite是类似webpack的前端构建工具，基于浏览器 ES module ，
优点：

快速的冷启动
即时的模块热更新
真正的按需编译

由于npm默认会安装最新的依赖,推荐使用yarn安装
创建项目：
yarn create vite-app
yarn install
生成的项目结构如下：
可以看到根目录有一个index.html文件,不同于webpack需配置入口文件,vite默认将跟目录的index作为入口。
运行npm run dev
结果展示：

添加vue-router：
yarn add vue-router@next
在src下的router下新建router.js,添加代码：

import { createRouter,createWebHistory} from "vue-router";
// 路由信息
const routes = [
    {
        path: "/index",
        name: "Index",
        component:  () => import('../views/index/index.vue'),
    },
    {
        path: "/test",
        name: "test",
        component:  () => import('../views/index/test.vue'),
    },
];
// 导出路由
const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;

注意：路由中路径不加.vue可能找不到页面
添加vue-router：
yarn add vuex@next
在src下的store下新建index.js,添加代码：

import { createStore } from 'vuex'
const store = createStore({
  state: {

  },
  getters: {

  },
  mutations: {

  },
  actions: {

  },
  modules: {

  }
})
export default store

在main.js中引用

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

在App.vue中加入<router-view></router-view>标签,使用<router-link to="/index">index</router-link> 尝试一下