一、项目链接

GitHub 地址: https://github.com/imxiaoer/ElementUIAdmin

项目演示地址:https://imxiaoer.github.io/ElementUIAdmin/dist/index

二、项目依赖 

 
  1. 数据请求         "axios": "^0.18.0",
  2. 图表控件         "echarts": "^4.2.0-rc.2",
  3. 富文本编辑器     "vue-quill-editor": "^3.0.6",
  4. 路由         "vue-router": "^3.0.1",
  5.状态管理        "vuex": "^3.0.1"
  6.数据模拟        "mockjs": "^1.0.1-beta3",
  7.ElementUI     "element-ui": "^2.4.11",

  8.VUE          "vue": "^2.5.17",
  
  脚手架版本: vue-cli 3.0

三、项目截图

四、部分代码

mock.js

import Mock from 'mockjs'

const Random = Mock.Random

// 用户数据
const userData = () => {
let users = []
for (let i = 0; i < 10; i++) {
let user = {
'id': i + 1,
'date': Random.date('yyyy-MM-dd'),
'name': Random.cname(),
'address': Mock.mock('@county(true)'),
'phone': Mock.mock(/^1[0-9]{10}$/),
'status': Random.integer(0, 1)
}
users.push(user)
}
return users
}
Mock.mock('/api/users', userData) // 文章数据
const articleData = () => {
let articles = []
for (let i = 0; i < 20; i++) {
let article = {
'id': i + 1,
'date': Random.date('yyyy-MM-dd'),
'title': Random.csentence(),
'author': Random.cname(),
'content': Random.csentence(),
'status': Random.integer(0, 1)
}
articles.push(article)
}
return articles
}
Mock.mock('/api/articles', articleData)

main.js

import Vue from 'vue'
import axios from 'axios'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import Utils from './common/utils'
import 'element-ui/lib/theme-chalk/reset.css'
import 'element-ui/lib/theme-chalk/index.css'
import './mock.js' Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.prototype.$http = axios
Vue.prototype.Utils = Utils new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

五、说明

1. 为了能在Github上成功演示项目,修改了路径配置,路径配置在vue.config.js 中。本地 build 请删除路径配置

2. 此项目为个人学习项目,如有疑问欢迎留言。发现BUG或代码问题也麻烦提个醒,谢谢!如有帮助到你,给个star啦 :)

GitHub 地址: https://github.com/imxiaoer/ElementUIAdmin

项目演示地址:https://imxiaoer.github.io/ElementUIAdmin/dist/index

VUE基于ElementUI搭建的简易单页后台的更多相关文章

  1. 使用 Flask 和 Vue.js 来构建全栈单页应用

    在这个教程中,我将向你展示如何将 Vue 的单页面应用和 Flask 后端连接起来. 简单的来说,如果想在 Flask 中使用 Vue 框架是没有什么问题的. 但在实际中存在一个明显的问题就是 Fla ...

  2. vue路由实现多视图的单页应用

    多视图的单页应用:在一个页面中实现多个页面不同切换,url也发生相应变化. router-view结合this.$router.push("/pickUp")实现,效果如下: 当点 ...

  3. 【UGUI】 (三)------- 背包系统(上)之简易单页背包系统及检索功能的实现

    背包系统,无论是游戏还是应用,都是常常见到的功能,其作用及重要性不用我多说,玩过游戏的朋友都应该明白. 在Unity中实现一个简易的背包系统其实并不是太过复杂的事.本文要实现的是一个带检索功能的背包系 ...

  4. 从零搭建一个IdentityServer——单页应用身份验证

    上一篇文章我们介绍了Asp.net core中身份验证的相关内容,并通过下图描述了身份验证及授权的流程: 注:改流程图进行过修改,第三方用户名密码登陆后并不是直接获得code/id_token/acc ...

  5. vue基于element-ui的三级CheckBox复选框

    最近vue项目需要用到三级CheckBox复选框,需要实现全选反选不确定三种状态.但是element-ui table只支持多选行,并不能支持三级及以上的多选,所以写了这篇技术博文供以后学习使用. 效 ...

  6. vue使用elementUI组件提交表单(带图片)到node后台

    1.方法一(图片与表单分开,请求2次) 1.1 前台代码 // elementUI表单 <el-form ref="form" class="forms" ...

  7. VUE,基于vue-cli搭建创建vue项目

    前提:必须安装node.js,官方地址:https://nodejs.org/en/ 然后安装vue-cli 安装方式:cmd命令行安装:打开cmd命令符输入进行全局安装脚手架:npm install ...

  8. vue基于 element-ui 实现菜单动画效果,任意添加 li 个数均匀撑满 ul 宽度

    %)%)%%%))) .) .) .) .) .) .) .) .) .) .) .) .) .) .) .) .% %% %deg);}

  9. vue + element-ui 制作tab切换(适用于单页切换不同标记显示不同内容)

    本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...

随机推荐

  1. 使用MSF打造各种ShellCode

    MSF 生成各种后门 Windows: 生成Windows后门. msfvenom -a x86 --platform Windows -p windows/meterpreter/reverse_t ...

  2. LabVIEW(十二):VI本地化-控件标题内容的修改

    一.对于一般LabVIEW的学习,很少遇到本地化的问题但是我们经常会遇到界面控件标题的显示问题.由于各个技术领域的专业性,往往用户对VI界面的显示有自己的要求,其中就包括控件的标题问题,这可以理解成本 ...

  3. OpenStack-Ocata版+CentOS7.6 云平台环境搭建 — 4.镜像服务(glance)

    节点配置信息说明: 控制节点:controller: IP:192.168.164.128 hostname&hosts:likeadmin 计算加点:Nova: IP:192.168.164 ...

  4. Swift 里 Set(五)Adding & Removing Elements

    Adding Elements internal func _unsafeInsertNew(_ element: __owned Element) { _internalInvariant(coun ...

  5. C语言中几个常用数学计算函数ceil(), floor(), round()的用法

    最近在实现算法的过程中,遇到了使用几个数学计算函数,感觉挺有意思,就记下来 方便以后使用. ceil(x)返回不小于x的最小整数值(然后转换为double型). floor(x)返回不大于x的最大整数 ...

  6. Python基础入门教程(3)

    人生苦短,我学Pyhton Python(英语发音:/ˈpaɪθən/), 是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个公开发行版发行于199 ...

  7. centos7防火墙管理的变化

    当我们在centos7中输入service iptables status 查看系统的防火墙状态,会出现如下错误: 网上查阅才知道centos7的防火墙管理工具变了,原来的iptables已经不用了, ...

  8. 对于python setup.py install安装的包如何卸载

    easy_install 安装 卸载命令 easy_install -m package-name setup.py安装 帮助你纪录安装细节方便你卸载 python setup.py install ...

  9. can only concatenate tuple (not "int") to tuple问题原因

    #测试程序 import os from pydub import AudioSegment #已经确定, # enPath = "%s%s/%s"%(enDir,file,enf ...

  10. 源码编译安装lnmp环境

    一.源码编译安装步骤 首先说明源码安装的好处   速度快,可自定义路径 主要有三步:1.配置 进入源码安装包  ./configure --prefix=/uer/local/nginx  可指定参数 ...