详解Vue Elememt

详解Vue Elememt

安装

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

npm i -g vue-cli

mkdir my-project && cd my-project

vue 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

登录

首页

src/components/Index.vue

stripe

v-loading="loading"

element-loading-background="#dddddd"

:data="tableData"

style="width: 100%">

prop="id"

label="ID">

prop="name"

label="名称">

stripe

v-loading="loading"

element-loading-background="#dddddd"

:data="tableData"

style="width: 100%">

prop="id"

label="ID">

prop="id"

label="ID">

prop="name"

label="名称">

prop="name"

label="名称">

background

layout="prev, pager, next"

:total="total"

class="page"

@current-change="pageList">

background

layout="prev, pager, next"

:total="total"

class="page"

@current-change="pageList">

App

src/App.vue

首页

列表

基本资料

安全退出

Copyright © 2017 Flyerboy All Rights Reserved

调用 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 = false

new Vue({

el: '#app',

router,

components: { App },

template: ''

})

api 接口

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

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。