VUE基于ElementUI搭建的简易单页后台
一、项目链接
GitHub 地址: https://github.com/imxiaoer/ElementUIAdmin
项目演示地址:https://imxiaoer.github.io/ElementUIAdmin/dist/index
二、项目依赖
三、项目截图
四、部分代码
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搭建的简易单页后台的更多相关文章
- 使用 Flask 和 Vue.js 来构建全栈单页应用
在这个教程中,我将向你展示如何将 Vue 的单页面应用和 Flask 后端连接起来. 简单的来说,如果想在 Flask 中使用 Vue 框架是没有什么问题的. 但在实际中存在一个明显的问题就是 Fla ...
- vue路由实现多视图的单页应用
多视图的单页应用:在一个页面中实现多个页面不同切换,url也发生相应变化. router-view结合this.$router.push("/pickUp")实现,效果如下: 当点 ...
- 【UGUI】 (三)------- 背包系统(上)之简易单页背包系统及检索功能的实现
背包系统,无论是游戏还是应用,都是常常见到的功能,其作用及重要性不用我多说,玩过游戏的朋友都应该明白. 在Unity中实现一个简易的背包系统其实并不是太过复杂的事.本文要实现的是一个带检索功能的背包系 ...
- 从零搭建一个IdentityServer——单页应用身份验证
上一篇文章我们介绍了Asp.net core中身份验证的相关内容,并通过下图描述了身份验证及授权的流程: 注:改流程图进行过修改,第三方用户名密码登陆后并不是直接获得code/id_token/acc ...
- vue基于element-ui的三级CheckBox复选框
最近vue项目需要用到三级CheckBox复选框,需要实现全选反选不确定三种状态.但是element-ui table只支持多选行,并不能支持三级及以上的多选,所以写了这篇技术博文供以后学习使用. 效 ...
- vue使用elementUI组件提交表单(带图片)到node后台
1.方法一(图片与表单分开,请求2次) 1.1 前台代码 // elementUI表单 <el-form ref="form" class="forms" ...
- VUE,基于vue-cli搭建创建vue项目
前提:必须安装node.js,官方地址:https://nodejs.org/en/ 然后安装vue-cli 安装方式:cmd命令行安装:打开cmd命令符输入进行全局安装脚手架:npm install ...
- vue基于 element-ui 实现菜单动画效果,任意添加 li 个数均匀撑满 ul 宽度
%)%)%%%))) .) .) .) .) .) .) .) .) .) .) .) .) .) .) .) .% %% %deg);}
- vue + element-ui 制作tab切换(适用于单页切换不同标记显示不同内容)
本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...
随机推荐
- HTTP 协议基础概念和报文结构
基础概念 1.WWW(World Wide Web,万维网)构建技术有3项: (1)把SGML(Standard Generalized Markup Language,标准通用标记语言)作为页面的文 ...
- vsftpd安装配置以及常见问题解决
vsftpd安装配置以及踩坑解决办法,Centos7 nginx已经配置成功了,但是使用http始终没办法访问到图片,那么你来对地方了(在文章末尾是原因) 配置nginx教程:http://blog. ...
- Android基础-系统架构分析,环境搭建,下载Android Studio,AndroidDevTools,Git使用教程,Github入门,界面设计介绍
系统架构分析 Android体系结构 安卓结构有四大层,五个部分,Android分四层为: 应用层(Applications),应用框架层(Application Framework),系统运行层(L ...
- 【练习】Java中的读文件,文件的创建,写文件
前言 大家好,给大家带来Java中的读文件,文件的创建,写文件的概述,希望你们喜欢 读文件 public static void read(String path,String filename){ ...
- Java 命令行启动时指定配置文件目录
java -jar -Xbootclasspath/a:/home/tms/conf /home/tms/bin/S17-tms.jar 先指定配置文件目录: 再指定jar包路径: 运行clas ...
- Spring.Net实现跨数据库服务层事务管理
在实际项目中用了Spring.Net框架之后,发现这框架在处理数据库事务上特别强大,声明式的数据库事务解放了一般开发人员对数据库事务操作的复杂处理.尤其是多数据库事务处理上,尤为显得更简便,几个简单的 ...
- ARM中几个典型的汇编指令解析
启动嵌入式设备时,遇到了一些汇编,做个笔记,免得以后忘记了. 一句汇编语句如下所指示: __asm ( ".syntax unified\n" ".thumb\n&quo ...
- Linux - 利用systemctl命令管理服务
systemctl命令是系统服务管理器指令,融合了service和chkconfig的功能,可以查看和设置服务. 这里以docker服务为例. 利用systemctl命令管理 显示服务状态:syste ...
- 使用node.js如何爬取网站数据
数据库又不会弄,只能扒扒别人的数据了. 搭建环境: (1).创建一个文件夹,进入并初始化一个package.json文件. npm init -y (2).安装相关依赖: npm install ...
- epel安装第三方扩展源后,运行yum报错的解决方案
yum安装报错:Cannot retrieve metalink for repository: epel. Please verify its path and try again 解决方法: 一句 ...