Project Repository

GitHub Repository: https://github.com/imxiaoer/ElementUIAdmin

Live Demo: https://imxiaoer.github.io/ElementUIAdmin/dist/index

Project Dependencies

• HTTP Client: "axios": "^0.18.0"
• Charting Library: "echarts": "^4.2.0-rc.2"
• Rich Text Editor: "vue-quill-editor": "^3.0.6"
• Routing: "vue-router": "^3.0.1"
• State Management: "vuex": "^3.0.1"
• Mock Data: "mockjs": "^1.0.1-beta3"
• UI Framework: "element-ui": "^2.4.11"
• Core Framework: "vue": "^2.5.17"

Scaffolding Version: vue-cli 3.0

Code Examples

Mock Data Configuration

import Mock from 'mockjs'

const Random = Mock.Random

// Generate mock user data
const generateUsers = () => {
  const userList = []
  for (let i = 0; i < 10; i++) {
    const user = {
      'id': i + 1,
      'registrationDate': Random.date('yyyy-MM-dd'),
      'fullName': Random.cname(),
      'location': Mock.mock('@county(true)'),
      'mobileNumber': Mock.mock(/^1[0-9]{10}$/),
      'isActive': Random.integer(0, 1)
    }
    userList.push(user)
  }
  return userList
}
Mock.mock('/api/user-list', generateUsers)

// Generate mock article data
const generateArticles = () => {
  const articleList = []
  for (let i = 0; i < 20; i++) {
    const article = {
      'id': i + 1,
      'publishDate': Random.date('yyyy-MM-dd'),
      'headline': Random.csentence(),
      'writer': Random.cname(),
      'summary': Random.csentence(),
      'published': Random.integer(0, 1)
    }
    articleList.push(article)
  }
  return articleList
}
Mock.mock('/api/article-list', generateArticles)

Application Entry Point

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 Helpers from './common/helpers'
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.Helpers = Helpers

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Implementation Notes

1. For GitHub Pages deployment compatibility, path configurations were adjusted in vue.config.js. Remember to remove these configurations when building locally.
2. This project serves as a learning exercise. Bug reports and improvement suggestions are welcome.