当前位置： 移动技术网 > IT编程>开发语言>JavaScript > VUE基于ElementUI搭建的简易单页后台

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

2019年01月08日  | 移动技术网IT编程  | 我要评论

一、项目链接

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

 

三、项目截图

 

 

 

四、部分代码

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上成功演示项目，修改了dist目录中 里面的 css 和 js 文件的引用路径。

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

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

 

2. 此项目为个人学习项目，如有疑问欢迎留言。发现bug或代码问题也麻烦提个醒，谢谢！如有帮助到你，给个star啦 ：）

 

github 地址： https://github.com/imxiaoer/elementuiadmin

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网