安装
创新互联建站专业提供成都主机托管四川主机托管成都服务器托管四川服务器托管，支持按月付款！我们的承诺：贵族品质、平民价格，机房位于中国电信/网通/移动机房，服务器机柜租赁服务有保障！
我使用的是 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
App
src/App.vue
调用 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构建管理后台的全部内容，感谢大家对创新互联的支持。
网页名称：详解VueElememt-UI构建管理后台
分享链接：
http://cdkjz.cn/article/gdjhgs.html
