在vue的脚手架环境中利用elementui实现后台系统

后台实现效果：

一、用Vue脚手架创建项目并运行

①下载elementui插件
在终端中或cmd中运行

npm i element-ui -S

②在main.js中配置

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

③在views下创建Classify.vue(商品分类)，List.vue(商品列表)，Index.vue

④配置路由

const routes = [
  {
    path: '/index',
    name: 'Index',
    component: () => import ('@/views/Index.vue'),
    children:[
      {
        path: '/classify',
        name: 'classify',
        component: () => import ('@/views/Classify.vue'),
      },
      {
        path: '/list',
        name: 'list',
        component: () => import ('@/views/List.vue'),
      },
    ]
  },

]

⑤Index.vue

<template>
  
    <el-container style="height:100%">
    <el-header style="background:#303133;display:flex;align-items:center;justify-content:space-between;">
        <div style="color:white;font-weight:bold;font-size:22px">
            <span v-html="sysTit"></span>
            <i :class="icon" style="margin-left:20px" @click="handleCollapse"></i>
        </div>
        <div  style="color:white;font-size:18px;display:flex;">
            <span style="width:120px">用户名 :</span>
            <span style="width:120px">退出登录</span>
        </div>
    </el-header>
    <el-container>
      <el-aside :width="`${asideWidth}px`" style="background:#545C64;transition: width .3s">
            <el-menu
            default-active="/classify"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            router
            :collapse='isCollapse'
            style="border:0"
            :width="`${asideWidth}px`"
            model='vertical'
            active-text-color="#ffd04b">
            
            <el-menu-item index="/list" style="background:#545c64">
                <i class="iconfont iconwode aside-iconfont"></i>
                <span slot="title" style="font-size:16px">商品列表管理</span>
            </el-menu-item>

            <el-menu-item index="/classify" style="backgound:#545c64">
                <i class="iconfont icongengduo aside-iconfont"></i>
                <span slot="title" style="font-size:16px">分类管理</span>
            </el-menu-item>

            </el-menu>
        </el-aside> 

            <el-main style="background:#DCDFE6">
                <router-view/>
            </el-main>
            </el-container>
        </el-container>
  
</template>

<script>
export default {
    data(){
        return {
            isCollapse:false, //默认为false展开状态 
            icon:'el-icon-s-fold',
            asideWidth:200,
            sysTit:'萝卜商城系统'
        }
    },
    methods:{
        handleCollapse(){
            this.isCollapse = !this.isCollapse
            this.icon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
            this.asideWidth = this.isCollapse ? 64 : 200
            this.sysTit = this.isCollapse ? '<img src = "/img/0.png" style="width:35px;margin-left:15px"/>' : '萝卜商城系统'
        },
        handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>

<style scoped>
.aside-iconfont{
    margin-right: 10px;
}
</style>

⑥在public下index.html添加style样式

<div id="app" style="height: 100%"></div>

App.vue中设置如下style，使页面100%撑开

<template>
  <div class="app">
    <router-view/>
  </div>
</template>

<script>
export default {

}
</script>

<style >
html,body{
  margin: 0;
  padding: 0;
  height: 100%;
}
.app{
  height: 100%;
}
</style>

⑦Classify.vue

<template>
  <div>
      <el-button type="primary" icon="el-icon-plus" size="medium" @click="open">添加分类</el-button>

      <el-table style="margin-top:50px;width:1000px;margin:0 auto;font-size:18px" :data="tableData" border>
          <el-table-column label="分类" prop="name"></el-table-column>
          <el-table-column label="创建时间" prop="createTime"></el-table-column>
          <el-table-column label="操作">
             <template slot-scope="scope">
              <el-button @click="handleUpdate(scope)" type="primary" size="medium">修改</el-button>
              <el-button type="danger" size="medium" @click="handleDel(scope)">删除</el-button>
            </template>
          </el-table-column>
      </el-table>
  </div>
</template>

<script>
export default {
    data(){
      return {
        tableData:[
        ]
      }
    },
    methods:{
      open() {
        this.$prompt('请输入分类名称', '添加分类', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          let d = new Date()

          this.tableData.push({
            name:value,
            createTime:`${d.getFullYear()}-${d.getMonth()}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()} `
          })
         
          this.$message({
            type: 'success',
            message: value + '分类添加成功'
          });
        }).catch(() => {
  
        });
      },

      handleUpdate(scope){
        this.$prompt('请输入分类名称', '添加分类', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue:scope.row.name
        }).then(({ value }) => {
          scope.row.name = value
         
          this.$message({
            type: 'success',
            message: value + '分类修改成功'
          });
        }).catch(() => {
  
        });
      },

      handleDel(scope){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableData.splice(scope.$index,1)
          this.$message({
            type: 'success',
            message: '删除成功!'


          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }

    }
}
</script>

<style>

</style>

⑧List.vue

<template>
  <div>
      商品列表
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>