qq_43206280的博客

这里话不多说，直接上效果图,开发逻辑和专栏上篇用户管理大致相同。

首先从逻辑上，用户管理只限制admin用户显示。

{};return {这里判断登录名是否是admin。

其中针对多语言，name的应用相当关键。name 配置路由的标题，默认读取国际化文件 menu.ts 中 menu.xxxx 的值，如配置。name 为 login，则读取 menu.ts 中 menu.login 的取值作为标题。最终呈现效果就是自定义的一样。

src/locales/zh-CN/page.ts增加相关注册提示。至此，简单的注册功能已完成。

查看mock/user.ts文件中/api/currentUser接口返回信息，用户名字段为name，咱们自己的接口数据用户名为username。这里有多种方法解决，可以进行替换，也可以直接赋值添加name字段，这里采用直接替换。至此登录用户信息以及退出登录按钮正常显示。这里登录用户名称替换完成。这里暂时采用静态图片地址。

项目初始化完成之后，准备开始进行项目的开发，首先配置好开发环境作为整个项目的基础。

一系列的 lint 脚本，包括 TypeScript，less，css，md 文件。analyze 脚本做的事情与 build 的相同，但是他会打开一个页面来展示你的依赖信息。这里建议使用npm或者tyarn，cnpm和npm部分不兼容，创建项目时会报部分依赖缺失的问题。运行这个脚本会启动服务，自动打开默认浏览器展示你的页面。当你重新编辑代码后，页面还会自动刷新。运行这个脚本将会编译你的项目，你可以在项目中的 dist 目录中找到编译后的文件用于部署。与 lint 相同，但是会自动修复 lint 的错误。