vue教程4-vueadmin上手
项目地址
https://github.com/PanJiaChen/vue-admin-template
这是一个 极简的 vue admin 管理后台 它只包含了 Element UI & axios & iconfont & permission control & lint,这些搭建后台必要的东西。
- 在win环境下安装
- nodejs版本8.11.3
# Clone project
#生成vue-admin-template目录
git clone https://github.com/PanJiaChen/vue-admin-template.git # Install dependencies
#先进入vue-admin-template目录
#命令会生成node_modules目录,所有依赖都在其中
#如果安装失败,删除node_modules目录,重新安装依赖
npm install # Serve with hot reload at localhost:9528
npm run dev # Build for production with minification
npm run build # Build for production and view the bundle analyzer report
npm run build --report
config/dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env') module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://127.0.0.1:8008/"',
})
#在config里有dev环境配置和prod环境配置
#将dev的BASE_API设定为后台的API地址,这样vue就能访问后端API数据了
#由于是跨域访问,所以在后台需要添加跨域访问的功能
src/api/mofang.js
import request from '@/utils/request' export function getMofangMailList() {
return request({
url: 'GameGroup/',
method: 'get'
})
}
#在src/api目录下建立mofang.js文件
#创建getMofangMailList方法
#url和config里的BASE_API拼接后就是API的请求地址
#使用get方法获取数据
router/index.js
{
path: '/mofang',
component: Layout,
children: [{
path: '',
name: 'Gamegroup',
component: () => import('@/views/mofang/index'),
meta: { title: 'Gamegroup', icon: 'example' }
}]
},
#添加一条路由信息
src/views/mofang/index.vue
<template>
<div class="dashboard-container">
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
prop="id"
label="编号"/>
<el-table-column
prop="name"
label="名称"/>
<el-table-column
prop="mail"
label="邮箱"/>
</el-table>
</div>
</template> <script>
import { getMofangMailList } from '@/api/mofang'
export default {
data() {
return {
tableData: []
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
getMofangMailList().then(response => {
this.tableData = response
})
}
}
}
</script> <style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
</style>
#created()方法在dom的生命周期内执行,调用this.fetchData()
#fetchData()中,执行getMofangMailList方法
#在api中,使用get方法向api地址请求数据并return
#使用then方法,return的数据传参给response
#把response 的数据赋值给this.tableData
#this.tableData渲染到dom表单
vue教程4-vueadmin上手的更多相关文章
- vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用
vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...
- vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- vue教程3-02 vue动画
vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...
- vue教程3-01 路由、组件、bower包管理器使用
vue教程3-01 路由.组件.包管理器 以下操作前提是 已经安装好node.js npm bower-> (前端)包管理器 下载: npm install bower -g 验证: bower ...
- vue教程2-08 自定义键盘信息、监听数据变化vm.$watch
vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...
- vue教程2-07 自定义指令
vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...
- vue教程2-07 微博评论功能
vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- vue教程2-06 过滤器
vue教程2-06 过滤器 过滤器: vue提供过滤器: capitalize uppercase currency.... <div id="box"> {{msg| ...
- vue教程2-05 v-for循环 重复数据无法添加问题 加track-by='索引'
vue教程2-05 v-for循环 重复数据无法添加问题 加track-by='索引' 解决问题的代码示例: <!DOCTYPE html> <html lang="en ...
随机推荐
- POJ2104 K-th Number (子区间内第k大的数字)【划分树算法模板应用】
K-th Number Time Limit: 20000MS Memory Limit: 65536K Total Submissions: 40920 Accepted: 13367 Ca ...
- 详解 pthread_detach()函数
pthread_t 类型定义: typedef unsigned long int pthread_t; //come from /usr/include/bits/pthread.h 用途:pthr ...
- 小心transform
张老师总结的,感谢! <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- MAC OS Sierra 10.12.6 下对固态硬盘SSD 开启TRIM功能
这个是对于不是mac原装SSD的情况下才做的操作... 大家都知道,苹果店卖的SSD硬盘那怕就是一个256G的也要1000多人民币,而市场上的也就400-500左右人民币,整整少了一半还要多,可见JS ...
- js 时间格式处理插件 moment
官网: http://momentjs.cn/docs/#/plugins/ 各种API官网上都有详细的例子,这里就不做一一说明. 重点讲两个常用的: 一.获取当前日期 moment().format ...
- mac hosts
1 在命令行中输入:sudo vim /etc/hosts. 2 输入开机密码,就可打开文件.按下键盘i,对文件进入可编辑状态. 3 修改完,先按esc退出编辑模式,之后,按shift+:,再按wq来 ...
- NOI.AC 32 Sort——分治
题目:http://noi.ac/problem/32 从全是0和1的情况入手,可以像线段树一样分治下去,回到本层的时候就是左半部的右边是1,右半部的左边是0,把这两部分换一下就行.代价和时间一样是n ...
- vijos:P1155集合位置(次短路)
描述 每次有大的活动,大家都要在一起“聚一聚”,不管是去好乐迪,还是避风塘,或者汤姆熊,大家都要玩的痛快.还记得心语和花儿在跳舞机上的激情与释放,还记得草草的投篮技艺是如此的高超,还记得狗狗的枪法永远 ...
- SpringMVC之六:Controller详细介绍
一.简介 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model ,然后再把该Mo ...
- Promise API
Promise API 刚刚接触promise这个东西,网上看了很多博客,大部分是讲怎么用Promise,丝毫没提怎么实现Promise. 我不甘 心,可是真去看JQuery或者Angular ...