确认环境nodeJS 版本v18.16.0 或 16检测命令#检测node.js版本 node -v #察看所有版本 where node切换淘宝镜像# npm 永久切换 npm config set registry https://registry.npmmirror.com # yarn 永久切换 yarn config set registry https://registry.npmmirror.com # pnpm 永久切换 pnpm config set registry https://registry.npmmirror.com切换和管理 node 版本的工具https://github.com/nvm-sh/nvmhttps://github.com/nvm-sh/nvmnpm 版本9.5.1如何单独修改 npm 版本不改变 Node.js 版本安装更换过程中出现了 权限 问题用管理员身份运行即可初始化使用 vue-cli 脚手架https://cli.vuejs.org/zh/https://cli.vuejs.org/zh/安装脚手架工具npm install -g vue/cli检测是否安装成功vue -V如果找不到命令那么建议去重新到安装 npm重新帮你配置环境变量。创建项目vue create liuoj注意所有字母小写 vue3特性根据需求选择运行项目能运行就成功了引入组件Vue Router 路由组件已自动引入无需再引入https://router.vuejs.org/zh/introduction.htmlhttps://router.vuejs.org/zh/introduction.html组件库https://arco.design/vuehttps://arco.design/vue快速上手https://arco.design/vue/docs/starthttps://arco.design/vue/docs/start执行安装npm install --save-dev arco-design/web-vue改变 main.tsimport { createApp } from vue; import App from ./App.vue; import arco-design/web-vue/dist/arco.css; // 样式 import ArcoVue from arco-design/web-vue; // 组件 import router from ./router; import store from ./store; createApp(App).use(ArcoVue).use(store).use(router).mount(#app);引入一个组件如果显示出来就表示引入成功实现通用路由菜单菜单组件https://arco.design/vue/component/menuhttps://arco.design/vue/component/menu目标根据路由配置信息自动生成菜单内容。实现更通用、更自动的菜单配置。步骤1提取通用路由文件2菜单组件读取路由动态渲染菜单项3绑定跳转事件4同步路由的更新到菜单项高亮同步高亮原理首先点击菜单项 触发点击事件跳转更新路由 更新路由后同步去更新菜单栏的高亮状态。使用 Vue Router 的 afterEach 路由钩子实现权限管理如何处理页面权限在app.vue中判断页面是否有“仅管理员可见”标识如果有再看用户是否有权限通过路由的meta参数设置标识。实现功能路由里面的meta中acessadmin的页面仅管理员可见的页面用户是管理员展示普通用户隐藏且点击之后跳转到404无权限页面。globalheader页面实现不能用v-forv-if去条件渲染遍历相当于两个嵌套for循环正确做法写一个计算属性把满足权限的路由过滤出来页面直接展示满足权限的路由。权限类型枚举类文件accessEnum权限通用方法checkAccess