vue3 + vite4 + vue-router4 + pinia 入门级管理后端
Web前端,Vue,vue,javascript,css,vue.js,node.js 额外说明
更新时间[2023-03-03]，所有安装包会不定时最新版更新，保证可操作性。不能更新的也会在文档中说明。
最新全家桶GitHub地址：vue3 + vite4 + vue-router4 + pinia
以下内容是vue3+vue-cli配置的全家桶，但不建议阅读。你可以使用最新的GitHub项目进行练习，该项目已经在公司项目中使用。
这个小东西是零敲碎打的，还存在很多不完善的地方。希望大家共同学习，共同进步。文章中如有错误请指正。当您阅读本文时，假设您已具备一定的基础。否则，请先了解基础知识。以下是参考文章，完整的项目在文章最后。
ps：最近突然发现我的国际化vue-i18n方法有问题。虽然功能可以实现，但是总感觉怪怪的。我目前正在花时间解决这个问题。如果有人知道如何解决可以留言。谢谢。 。
vue-cli：从 v3 迁移 | Vue CLI
vue：Vue3js（中文文档：Vue3中文文档-vuejs）
vue-router：首页 | Vue路由器
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中会是未定义的，核心方法
// 组装动态路由
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.页面浏览量：
其余的就简单多了。您只需要处理菜单即可。该项目已经编写了一个无限级别的菜单演示。
vue3-pc：vue3+vue-router4+vuex+axios+元素加
vue3-h5：vue3+vue-router4+vuex+axios+vant（主要是基于PC架的移动端改编。我不做太多移动工作，所以如果有人有时间，可以fork并提交代码。当前版本可以正常播放。）