一步步创建vue-element-admin框架实现005-实现登录功能

一步步创建vue-element-admin框架实现005-实现登录功能

使用说明：

一步步创建vue-element-admin框架是基于vue-element-admin和vue-admin-template基础版的代码来实现的，文章会经常说直接拷贝项目的文件

一、安装插件

模拟请求安装mockjs，在package.json加入配置，然后执行npm install

  "devDependencies": {
	"mockjs": "1.0.1-beta3"
  }

进度条插件：nprogress

npm install –save nprogress

二、模拟数据文件

1）直接拷贝vue-admin-template的mock文件夹内容

• index.js
• mock-server.js
• table.js
• user.js
• utils.js

2）在main.js文件增加配置

if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}

对比图：

3）新增请求文件：src\api\user.js

直接拷贝vue-admin-template的：src\api\user.js文件

三、新增登录界面

1）新增文件：src/views/login/index.vue

直接拷贝vue-admin-template的：src/views/login/index.vue文件

2）在src\router\index.js路由文件增加登录地址

 export const constantRoutes = [ {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },....
]
 
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

对比图：

3）退出功能：src\layout\components\Navbar.vue

4）工具类：src\utils\validate.js

增加方法：

export function validUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}

四、新增状态管理user

1）新增文件：src\store\modules\user.js

直接拷贝vue-admin-template的：src\store\modules\user.js文件

2）配置文件：src\store\index.js

五、配置路由拦截功能

1）新增文件:src\permission.js

直接拷贝vue-admin-template的：src\permission.js文件

2）新增文件:src\utils\get-page-title.js

直接拷贝vue-admin-template的：src\utils\get-page-title.js文件

3）在main.js配置使用