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

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

安装

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

npm i -g vue-climkdir my-project && cd my-projectvue init webpack

登录后复制

修改 package.json 文件：

..."dependencies": { "vue": "^2.5.2", "vue-router": "^3.0.1", "element-ui": "^2.0.7", // element-ui "axios": "^0.17.1" // http 请求库}...

登录后复制

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

立即学习“前端免费学习笔记（深入）”；

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

├─build // 构建配置├─config // 配置文件├─src // vue 开发源文件目录├────assets // css/js 文件├────components // vue 组件├────router  // 路由├────App.vue  // 启动组件├────main.js // 入口文件├─static // 静态文件目录├─test // 测试目录

登录后复制

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

目标

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

首页，调用接口渲染列表

路由

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

我们这里需要两个路由：

src/router/index.js

import Vue from 'vue'import Router from 'vue-router'import Index from '@/components/Index'import Login from '@/components/Login'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

 
                                     登录       
import $http from '@/api/'import config from '@/config'export default { data () {  return {   user: {    name: '',    password: ''   }  } }, mounted: function () {  var token = localStorage.getItem('token')  if (token) {   this.$router.push('/index')  } }, methods: {  login: function () {   var data = {    grant_type: 'password',    client_id: config.oauth_client_id,    client_secret: config.oauth_secret,    username: this.user.name,    password: this.user.password   }   var _this = this   $http.login(data).then(function (res) {    if (res.status === 200) {     $http.setToken(res.data.access_token)     _this.$message({      showClose: false,      message: '登录成功',      type: 'success'     })     _this.$router.push('/index')    } else {     _this.$message({      showClose: false,      message: '登录失败',      type: 'error'     })    }   })  } }}.login{  width: 300px;  margin: 100px auto;  background-color: #ffffff;  padding: 30px 30px 5px;  border-radius: 5px;}

登录后复制

首页

src/components/Index.vue

 
                     
import $http from '@/api/'export default { data () {  return {   tableData: [],   total: 0,   loading: false  } }, mounted: function () {  this.getList() }, methods: {  pageList: function (page) {   this.search.page = page   this.getList()  },  getList: function () {   var _this = this   _this.loading = true   $http.index().then(function (res) {    if (res.status === 200) {     _this.tableData = res.data.data.lists     _this.total = res.data.data.total    }    _this.loading = false   })  } }}

登录后复制

App

src/App.vue

 
         
Admin
               首页     列表                        基本资料      安全退出                   Copyright © 2017 Flyerboy All Rights Reserved      
import Menus from '@/components/Menu'export default { name: 'App', data () {  return {   token: false  } }, mounted: function () {  this.token = localStorage.getItem('token') ? true : false }, watch: {  '$route.path': function ($newVal, $oldVal) {   this.token = localStorage.getItem('token') ? true : false  } }, methods: {   operate: function (command) {   if (command === '/logout') {    localStorage.removeItem('token')    this.$router.push('login')   } else {    this.$router.push(command)   }  } }, components: {  Menus }}body{ margin: 0; padding: 0; background-color: #eeeeee;}.header{ position: absolute; top: 5px; right: 20px;}.header img{ width: 38px; height: 38px; border-radius: 20px; border: 1px solid #aaaaaa;}#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}.main{ padding: 20px; min-height: 600px; margin-bottom: 20px;}.main table{ background: #ffffff;}.left-menu{ background-color: #33374B;}.logo{ padding: 20px 0 15px 20px; font-size: 24px; border-bottom: 2px solid #3a8ee6;}.logo a{ color: #ffffff; text-decoration: none;}.left-menu .el-menu{ border-right: 0;}.breadcrumb{ line-height: 40px; padding: 5px 20px; background: #ffffff;}.breadcrumb span{ color: #069; font-weight: normal;}.breadcrumb .active{ color: #aaaaaa;}.page{ margin: 20px 0 0; margin-left: -10px;}.page .el-pager li.number{ background-color: #ffffff;}.el-submenu .el-menu-item{ padding-left: 60px !important;}.footer{ position: fixed; bottom: 0; right: 0; font-size: 12px; color: #888888; padding: 15px 20px; text-align: center; background-color: #ffffff; margin-top: 40px;}

登录后复制

调用 API

src/api/index.js

import axios from 'axios'axios.defaults.baseURL = 'http://localhost:8000/'axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token')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

export default { oauth_client_id: 2, oauth_secret: ''}

登录后复制

main.js

src/main.js

import Vue from 'vue'import App from './App'import router from './router'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)Vue.config.productionTip = falsenew Vue({ el: '#app', router, components: { App }, template: ''})

登录后复制

api 接口

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

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

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

相关文章：

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

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

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

以上就是Vue中使用Elememt-UI构建管理后台（详细教程）的详细内容，更多请关注【创想鸟】其它相关文章！