Vue + Element-UI使用

Vue + Element-UI使用

安装element

cnpm i element-ui -S

在vue当中引入element-ui

在main.js中写入以下内容

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

用element布局页面

1、使用container布局页面，首页引入导航， Index.vue

<template>
    <div>
        <el-container>
            <el-aside width="200px">
                <el-menu router
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose">
                    <el-menu-item index="/home">
                        <i class="el-icon-location"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>分类管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1">分类添加</el-menu-item>
                            <el-menu-item index="2-2">分类展示</el-menu-item>
                        </el-menu-item-group>    
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                        <i class="el-icon-goods"></i>
                        <span>商品管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="3-1">商品添加</el-menu-item>
                            <el-menu-item index="3-2">商品展示</el-menu-item>
                        </el-menu-item-group>    
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                        <i class="el-icon-user"></i>
                        <span>用户管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="4-1">商品添加</el-menu-item>
                            <el-menu-item index="4-2">商品展示</el-menu-item>
                        </el-menu-item-group>    
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                        <i class="el-icon-setting"></i>
                        <span>设置管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="5-1">商品添加</el-menu-item>
                            <el-menu-item index="5-2">商品展示</el-menu-item>
                        </el-menu-item-group>    
                    </el-submenu>
                    
                </el-menu>
            </el-aside>
            <el-container>
                <!-- 头部信息 -->
                <el-header>
                    <h2>美多商品后台管理</h2>
                </el-header>
                <!-- 中间内容 -->
                <el-main>
                    <router-view/>
                    
                </el-main>
                
            </el-container>
        </el-container>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    
}
</script>


// 导航样式
<style>
  .el-header, .el-footer {
    
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    
    text-align: left;
    line-height: 200px;
  }
  
  .el-main {
    
    text-align: center;
    line-height: 200px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>

2、修改App.vue

<template>
  <div id="app">
    <-- 使用组件嵌套的方式，把Index.vue引入 -->
    <index/>
    
  </div>
</template>

<script>
import Index from './components/Index'
export default {
  name: 'App',
  components: {
    Index
  }
}
</script>