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

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

更新时间[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

正文

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

├── package.json 包管理

├── public

│   ├── favicon.ico

│   ├── img

│   ├── index.html

│   └── robots.txt

├── src

│   ├── App.vue

│   ├── api 接口定义

│   ├── assets 静态资源

│   ├── components 组件

│   ├── libs 工具库

│   ├── main.js 启动入口

│   ├── mock 数据mock

│   ├── plugins 组件工具

│   ├── registerServiceWorker.js

│   ├── router 路由

│   ├── store vuex

│   └── views 页面

└── vue.config.js 启动配置

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

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

1、vue.config.js：

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

config.resolve.alias
      .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、main.js：

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

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

const app = createApp(App);


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

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

3、*store（vuex）：

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

// 组装动态路由
const setRouter = (dataList) => {
  // 必须为根路由，不能在其他地方生成component，除非在store里面
  // () => import("@/views/Index"),
  // () => Promise.resolve(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.$router.replace(from.fullPath));
            },
            render: (h) => h(),
          },
        },
        // 页面重定向
        {
          path: "redirect/:route*",
          name: "redirect",
          hidden: true,
          component: {
            beforeRouteEnter(to, from, next) {
              next((vm) => vm.$router.replace(JSON.parse(from.params.route)));
            },
            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(addRouters.children, dataList, "");
  return [...rootRouter, addRouters, ...lastRouter];
};
const setItemRouter = (routerList, dataList, baseUrl) => {
  for (let data of dataList) {
    let path = baseUrl + "/" + data.path;
    let route = {
      path: path,
      name: data.path,
      redirect: "",
      component: loadView(data.component || "Index"),
      meta: {
        icon: "",
        title: data.title,
        auth: true,
        isSideMenu: !!data.isSideMenu,
        isCache: !data.isCache,
      },
      children: [],
    };
    if (data.children && data.children.length > 0) {
      route.redirect = { name: data.children[0].path };
      routerList.push(route);
      setItemRouter(routerList, data.children, path);
    } else {
      routerList.push(route);
    }
  }
};
export const loadView = (view) => {
  // 路由懒加载
  // return (resolve) => require([`@/views/${view}`], resolve);
  return () => Promise.resolve(require(`@/views/${view}`).default);
};

4、*router：

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

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

store
        .dispatch("store/user/getUserInfo")
        .then((resp) => {
          resp.forEach((route) => {
            router.addRoute(route);
            router.options.routes.push(route);
          });
          next({ ...to, replace: true });
          NProgress.done();
        })
        .catch((error) => {
          console.log(error);
        });

5、page-view：

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

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

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