• vue2.0+elementUI构建单页面后台管理平台


    git:https://github.com/suweiteng/vue2-management-platform (记得点star哈,感谢~)
    访问:https://suweiteng.github.io/vue2-management-platform

    概述:

    最近学习vue2.0和elementUI的使用,在各种文档的帮助下,尝试编写了一个后台管理平台。
    目前数据采用mock.js模拟,比较简略。后续会进行细化并增加登录、表单等功能。

    依赖项版本

    "vue": "^2.1.0",

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

    "axios": "^0.16.1", // 官方已不再推荐使用vue-resource,如今推荐axios。

    "element-ui": "^1.2.3", // 样式库

    "mockjs": "^1.0.1-beta3", //模拟数据使用

     更新:vue已升级至2.5.X,elementUI已升级至2.2,其他相关依赖也已升级,
     具体请参考https://github.com/suweiteng/vue2-management-platform/blob/master/package.json
    

    更新

    增加富文本编辑器(beta1.6)

    2017年7月11日:集成Ueditor富文本编辑器,作为公共组件。

    2017年7月13日:编辑器支持同页面多次调用。

    2018年1月23日:编辑器支持小功能:获取纯文本(解决博客中40L评论的疑问)。

    教程: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

  • 相关阅读:
    java 删除文件目录
    java导出echart图到excel 多张图片导出
    java导出sql文件
    split方法使用
    jqgrid列表添加单选框
    会消失的链接
    运用javascript做出链接类特效
    创建守护进程的步骤
    ext2文件系统
    C++枚举类型enum
  • 原文地址:https://www.cnblogs.com/dmcl/p/6722315.html
Copyright © 2020-2023  润新知