演示地址已经失效:演示地址
更新时间[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过去提交代码,目前这一版可以正常玩耍。)