码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-01-08 19:32:36      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:文本   theme   学习   目录   out   rod   util   col   outer   

一、项目链接

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目录中 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>

 

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

 

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

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

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

标签:文本   theme   学习   目录   out   rod   util   col   outer   

原文地址:https://www.cnblogs.com/similar/p/10240341.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!