一、前端初始化
1、配置前端环境
2、创建项目，使用命令vue create xiangoj-fontend
3、创建vue3.0项目
4、在IDEA打开项目并且运行
5、设置pretier,让代码更规范，否则会运行报错，快捷键是ctrl+alt+L
二、引入arco.design
1、进入arco design官方文档（vue版本），地址是https://arco.design/vue/docs/start
2、在使用npm之前，为npm配置淘宝镜像，命令是
npm config set registry https://registry.npm.taobao.org
3、使用npm安装，在项目main.js完整引入
4、可能main.js文件使用''会报错，这里我们使用""，main.js修改后如下:
import { createApp } from "vue";
import App from "./App.vue";
import ArcoVue from "@arco-design/web-vue";
import "@arco-design/web-vue/dist/arco.css";
import router from "./router";
import store from "./store";
createApp(App).use(ArcoVue).use(store).use(router).mount("#app");
三、路由，vuex和权限校验
1、在header里实现路由跳转
router.afterEach((to, from, faile) => {
selectKeys.value = [to.path];
});
2、引入vuex进行全局状态管理，建立user.ts
import { StoreOptions } from "vuex";
export default {
namespaced: true,
state: () => ({
loginUser: {
userName: "未登录",
role: "",
},
}),
actions: {
getLoginUser({ commit, state }, payload) {
commit("updateUser", { userName: "鱼皮" });
},
},
mutations: {
updateUser(state, payload) {
state.loginUser = payload;
state.role = "admin";
},
},
} as StoreOptions
3、在router上添加meta字段
{
path: "/admin",
name: "管理员面板",
component: AdminView,
meta: {
access: "admin",
}
4、在app.vue上进行权限校验
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const router = useRouter();
const store = useStore();
router.beforeEach((to, from, next) => {
// 仅管理员可见，判断当前用户是否有权限
if (to.meta?.access === "admin") {
if (store.state.user.loginUser?.role !== "admin") {
next("/noAuth");
return;
}
}
next();
})