优秀的编程知识分享平台

网站首页 > 技术文章 正文

VUE基于ElementUI搭建的简易单页后台

nanyue 2024-10-13 03:58:57 技术文章 7 ℃

项目依赖

  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",

部分代码

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)

项目截图

说明

为了能在Github上成功演示项目,修改了dist目录中 index.html 里面的 css 和 js 文件的引用路径。

原路径: <link href=/css/app.7b50a0e7.css rel=preload as=style>

修改后路径: <link href=/ElementUIAdmin/dist/css/app.7b50a0e7.css rel=preload as=style>

  • GitHub 地址: https://github.com/imxiaoer/ElementUIAdmin
  • 项目演示地址:https://imxiaoer.github.io/ElementUIAdmin/dist/index
最近发表
标签列表