安装
我使用的是 vue-cli
初始化项目,命令如下:
1 | npm i -g vue-cli |
修改 package.json
文件:
1 | ... |
之后执行 npm install
进行安装依赖,如果安装速度有点慢的话,可以试一下 cnpm
,具体安装和用法自行查找。
简单介绍下项目的目录结构:
1 | ├─build // 构建配置 |
之后在项目根目录执行 npm run dev
,打开浏览器输入 http://localhost:8080
就可以查看了。
目标
- 登录页面,登录,退出功能
- 首页,调用接口渲染列表
路由
路由使用的是 vue-router
,具体用法可参考 官方文档
我们这里需要两个路由:
src/router/index.js
1 | import Vue from 'vue' |
登录页面
src/components/Login.vue
1 | <template> |
首页
src/components/Index.vue
1 | <template> |
App
src/App.vue
1 | <template> |
调用 API
src/api/index.js
1 | import axios from 'axios' |
config
src/config.js 这里配置登录 oauth 需要的 client_id 和 secret
1 | export default { |
main.js
src/main.js
1 | import Vue from 'vue' |
api 接口
主要用到两个接口,一个是 api/oauth/token
登录获取 token 接口,一个获取列表 api/user/list
。
第一个接口是用到 laravel oauth,第二个接口直接是一个简单的查询用户列表接口,详细讲会在下一篇文章中讲述。
©版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 & 作者信息。
Happy Coding