Vue中使用Elememt-UI构建管理后台（详细教程）

来源：安汇情感

本篇文章给大家详细分享了Vue Elememt-UI构建管理后台的过程以及相关代码实例，一起参考学习下。

安装

我使用的是 vue-cli 初始化项目，命令如下：

修改 package.json 文件：

之后执行 npm install 进行安装依赖，如果安装速度有点慢的话，可以试一下 cnpm ，具体安装和用法自行查找。

简单介绍下项目的目录结构：

之后在项目根目录执行 npm run dev ，打开浏览器输入 http://localhost:8080 就可以查看了。

目标

登录页面，登录，退出功能

首页，调用接口渲染列表

路由

路由使用的是 vue-router，具体用法可参考官方文档

我们这里需要两个路由：

src/router/index.js

登录页面

src/components/Login.vue

首页

src/components/Index.vue

App

src/App.vue

调用 API

src/api/index.js

config

src/config.js 这里配置登录 oauth 需要的 client_id 和 secret

main.js

src/main.js

api 接口

主要用到两个接口，一个是 api/oauth/token 登录获取 token 接口，一个获取列表 api/user/list。

第一个接口是用到 laravel oauth，第二个接口直接是一个简单的查询用户列表接口，详细讲会在下一篇文章中讲述。

上面是我整理给大家的，希望今后会对大家有帮助。

利用vue如何实现将时间戳转换成自定义时间格式

利用vue和element-ui如何实现表格内容分页

详细讲解FastClick源码（详细教程）

显示全文