vue3 + vite4 + vue-router4 + pinia 入门级管理后台

时间：2025-03-05 07:28:59

演示地址已经失效：演示地址

更新时间[2023-03-03]，所有安装包会不定时最新版更新，保证可运行性。不能更新的也会在文档中说明。

最新全家桶GitHub地址：vue3 + vite4 + vue-router4 + pinia

一下内容是vue3 + vue-cli配置的全家桶，不过不太建议看了。大家直接使用最新的GitHub项目实战即可，已经在公司项目中使用了。

零零碎碎搞了这个小东西，还有很多不完善的地方。希望各位大佬共同学习和进步，文章若有不对之处请多多指正。在各位阅读这篇文章的时候，就当各位有一定的基础了。否则请各位先了解下基础，以下是参考文章，完整项目在文章最后。

ps：最近突然发现，我的国际化vue-i18n使用方法有问题，虽然可以实现功能，但总感觉很怪异，目前正在抽时间解决，如果有哪位大佬知道如何解决的，可以留言，感谢。

vue-cli：Migrating from v3 | Vue CLI

vue：Vue3js（中文文档：Vue3中文文档 - vuejs）

vue-router：Home | Vue Router

vuex：Vuex 是什么？ | Vuex

正文

基础配置项目中都已经写了，大家如果有疑问或者不适合的地方可以自行修改完善。

├──  包管理

├── public

│   ├── 

│   ├── img

│   ├── 

│   └── 

├── src

│   ├── 

│   ├── api 接口定义

│   ├── assets 静态资源

│   ├── components 组件

│   ├── libs 工具库

│   ├──  启动入口

│   ├── mock 数据mock

│   ├── plugins 组件工具

│   ├── 

│   ├── router 路由

│   ├── store vuex

│   └── views 页面

└──  启动配置

以上是大概的目录对应，好了开始正式撸代码了，各位坐好各自的板凳：

和vue2相同的配置在这不再赘述

1、：

总体来说和vue2没有多大区别，修改的地方不多主要就是 chainWebpack、pluginOptions较vue2配置有些不同，不过问题不大，大家根据自己的要求按照官方给出的格式配置就行，这个是我配置指定路径别名的：


      .set("@", resolve("src"))
      .set("@api", resolve("src/api"))
      .set("@assets", resolve("src/assets"))
      .set("@components", resolve("src/components"))
      .set("@libs", resolve("src/libs"))
      .set("@plugins", resolve("src/plugins"));

2、：

vue3变化很大，各种使用方式都改了，大家可以参考官方文档进行配置，我在这里并没有配置太多东西，毕竟以学习为主：

import { createApp } from "vue";
import App from "./";

const app = createApp(App);


// 全局变量配置方式
import filters from "@plugins/filters";
.$filters = filters;

// 链式使用，个人感觉非常舒服
(router).use(store).mount("#app");

3、*store（vuex）：

这里主要处理获取后端的菜单数据等等，组装成路由，其中vue-router对*处理方式修改为了正则匹配的方式 /:pathMatch(.*)* & /:pathMatch(.*)，原来的*在router中会undefined，核心方法

// 组装动态路由
const setRouter = (dataList) => {
  // 必须为根路由，不能在其他地方生成component，除非在store里面
  // () => import("@/views/Index"),
  // () => (require(`@/views/${view}`).default)
  // (resolve) => require([`@/views/${view}`], resolve);
  let rootRouter = [
    {
      path: "",
      redirect: { name: "/" },
    },
    {
      path: "/",
      name: "/",
      redirect: { name: "index" },
      children: [
        // 首页 必须 name:index
        // 刷新页面
        {
          path: "refresh",
          name: "refresh",
          hidden: true,
          component: {
            beforeRouteEnter(to, from, next) {
              next((vm) => vm.$());
            },
            render: (h) => h(),
          },
        },
        // 页面重定向
        {
          path: "redirect/:route*",
          name: "redirect",
          hidden: true,
          component: {
            beforeRouteEnter(to, from, next) {
              next((vm) => vm.$(()));
            },
            render: (h) => h(),
          },
        },
      ],
    },
  ];
  let addRouters = {
    path: "/index",
    name: "index",
    redirect: { name: "home" },
    component: loadView("Index"),
    meta: {
      auth: true,
    },
    children: [],
  };
  let lastRouter = [
    {
      path: "/:pathMatch(.*)*",
      component: loadView("error/404"),
      meta: {
        icon: "",
        title: "404",
        auth: false,
        isDisable: true,
        isCache: false,
      },
    },
    {
      path: "/:pathMatch(.*)",
      component: loadView("error/404"),
      meta: {
        icon: "",
        title: "404",
        auth: false,
        isDisable: true,
        isCache: false,
      },
    }
  ];
  setItemRouter(, dataList, "");
  return [...rootRouter, addRouters, ...lastRouter];
};
const setItemRouter = (routerList, dataList, baseUrl) => {
  for (let data of dataList) {
    let path = baseUrl + "/" + ;
    let route = {
      path: path,
      name: ,
      redirect: "",
      component: loadView( || "Index"),
      meta: {
        icon: "",
        title: ,
        auth: true,
        isSideMenu: !!,
        isCache: !,
      },
      children: [],
    };
    if ( &&  > 0) {
       = { name: [0].path };
      (route);
      setItemRouter(routerList, , path);
    } else {
      (route);
    }
  }
};
export const loadView = (view) => {
  // 路由懒加载
  // return (resolve) => require([`@/views/${view}`], resolve);
  return () => (require(`@/views/${view}`).default);
};

4、*router：

：需要配置的白名单，也就是说包含登录、注册、404等页面

：动态路由处理，由vue2中为addRoutes() 改为vue3中的addRoute()，核心代码：

store
        .dispatch("store/user/getUserInfo")
        .then((resp) => {
          ((route) => {
            (route);
            (route);
          });
          next({ ...to, replace: true });
          ();
        })
        .catch((error) => {
          (error);
        });

5、page-view：

剩下的就简单很多了，只需要处理菜单就ok了，项目已经写了一个菜单demo，无限级的。

vue3-pc：vue3+vue-router4+vuex+axios+elementplus

vue3-h5：vue3+vue-router4+vuex+axios+vant（主要还是基于pc的架子做的移动适配，我不怎么做移动端，所以如果哪位有时间可以fork过去提交代码，目前这一版可以正常玩耍。）

相关文章