详解Vue Elememt-UI构建管理后台

发布时间：2020-12-17 02:33:54 所属栏目：百科来源：网络整理

导读：安装我使用的是 vue-cli 初始化项目，命令如下：修改 package.json 文件：之后执行 npm install 进行安装依赖，如果安装速度有点慢的话，可以试一下 cnpm ，具体安装和用法自行查找。简单介绍下项目的目录结构：之后在项目根目录执行 npm run dev ，打

安装

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

修改 package.json 文件：

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

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

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

目标

登录页面，登录，退出功能
首页，调用接口渲染列表

路由

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

我们这里需要两个路由：

src/router/index.js

Vue.use(Router)

const routers = new Router({
routes: [
{
path: '/index',name: 'index',component: Index
},{
path: '/login',name: 'login',component: Login
}
]
})

routers.beforeEach((to,from,next) => {
if (to.name !== 'login' && !localStorage.getItem('token')) {
next({path: 'login'})
} else {
next()
}
})

export default routers

登录页面

src/components/Login.vue

首页

src/components/Index.vue

App

src/App.vue

调用 API

src/api/index.js

export default {
setToken: function (token) {
localStorage.setItem('token',token)
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
},login: function (param) {
return axios.post('oauth/token',param)
},index: function (params) {
return axios.get('api/user/list',{
params: params
})
}
}

config

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

main.js

src/main.js

Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
el: '#app',router,components: { App },template: ''
})

api 接口

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

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

以上就是本次整理的关于Vue Elememt-UI构建管理后台的全部内容，感谢大家对编程之家的支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!