vue2.0+elementUI構建單頁面後臺管理平臺

時間 2019-11-12

標籤 vue2.0+elementui vue elementui 構建頁面後臺管理平臺简体版

原文原文鏈接

git：https://github.com/suweiteng/vue2-management-platform （記得點star哈，感謝~）
訪問：https://suweiteng.github.io/vue2-management-platformcss

概述：

最近學習vue2.0和elementUI的使用，在各類文檔的幫助下，嘗試編寫了一個後臺管理平臺。
目前數據採用mock.js模擬，比較簡略。後續會進行細化並增長登陸、表單等功能。html

依賴項版本

~~"vue": "^2.1.0",~~vue

~~"vue-router": "^2.1.3",~~ // vue.js官方路由webpack

~~"axios": "^0.16.1",~~ // 官方已再也不推薦使用vue-resource，現在推薦axios。ios

~~"element-ui": "^1.2.3",~~ // 樣式庫git

"mockjs": "^1.0.1-beta3", //模擬數據使用github

更新：vue已升級至2.5.X，elementUI已升級至2.2，其餘相關依賴也已升級，
 具體請參考https://github.com/suweiteng/vue2-management-platform/blob/master/package.json

更新

增長富文本編輯器(beta1.6)

2017年7月11日：集成Ueditor富文本編輯器，做爲公共組件。web

2017年7月13日：編輯器支持同頁面屢次調用。vue-router

2018年1月23日：編輯器支持小功能：獲取純文本(解決博客中40L評論的疑問)。npm

教程：http://www.cnblogs.com/dmcl/p/7152711.html

效果以下：

在線體驗本功能：https://suweiteng.github.io/vue2-management-platform/#/editor

版本升級(beta2.0)

2018年2月25日：vue已升級至2.5.X，elementUI已升級至2.2，其餘相關依賴也已升級。(beta2.0)

效果以下：

2018年2月26日：增長打包分析webpack-bundle-analyzer；優化導出功能。(beta2.1)

預覽

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

部分代碼

首頁index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>後臺管理系統</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="static/css/reset.css">
  </head>
  <body>
    <div id="app">
       <router-view></router-view>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue

<template>
  <el-row class="container" style="height: 100%">
    <v-header :user="user"></v-header>
    <el-col :span="24" class="main">
      <el-row>
        <el-menu :default-active="$route.path" class="mar-l el-menu-vertical-demo el-col el-col-3" light router>
          <template v-for="(item,index) in $router.options.routes[0].children" v-if="!item.hidden">
            <el-menu-item :index="item.path" ><i class="fa" :class="item.class"></i>{{item.name}}</el-menu-item>
          </template>
        </el-menu>
        <section class="contentCon">
          <el-col :span="21" :offset="3" class="content-wrapper">
            <transition>
              <router-view></router-view>
            </transition>
          </el-col>
        </section>
      </el-row>
    </el-col>
  </el-row>
</template>
<script>
  import header from './components/header/header.vue';
  const ERR_OK = "000";
  export default {
    data () {
      return {
        user: {}
      };
    },
    created () {
      this.$http.get('/api/user').then((response) => {
        response = response.data;
        if (response.code === ERR_OK) {
          this.user = response.datas;
        }
      });
    },
    beforeCreate () {
      if (this.$route.path === '/') {
        this.$router.push({path: '/index'})
      }
    },
    components: {
      'v-header': header
    }
  };
</script>

App.vue

路由等
前期採用vue-resource，後期改成axios，方便修改，所以寫了：Vue.prototype.$http = axios;

import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
import App from './App';
import Index from './components/index/index';
import Table from './components/table/table';
import Form from './components/form/form';
import other from './components/other/other';
import 'font-awesome/css/font-awesome.min.css';
import Mock from './mock/mock';
Mock.mockData();
Vue.use(VueRouter);// 安裝路由功能
/* eslint-disable no-new */
Vue.use(VueRouter);
Vue.prototype.$http = axios;
Vue.use(ElementUI);

let routes = [
  {
    path: '/',
    component: App,
    children: [
      {path: '/index', component: Index, name: 'index', class: 'fa-line-chart'},
      {path: '/table', component: Table, name: 'table', class: 'fa-table'},
      {path: '/form', component: Form, name: 'form', class: 'fa-newspaper-o'},
      {path: '/other', component: other, name: 'other', class: 'fa-plug'}
    ]
  }
];
let router = new VueRouter({
  'linkActiveClass': 'active',
  routes
});
let app = new Vue({
  router
}).$mount('#app');
export default app;

git：https://github.com/suweiteng/vue2-management-platform （記得點star哈，感謝~）
訪問：https://suweiteng.github.io/vue2-management-platform

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。