element-ui 是基本的页面结构

卸载vue-cli

npm uninstall vue-cli -g 

安装vue-cli

npm install -g @vue/cli

 

 

标签

el-container  整个页面框架

el-aside  构建左侧菜单

      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <!--default-openeds: 默认打开-->
        <!--default-active:默认选中-->
        <el-menu :default-openeds="['1', '3']" :default-active="'1-2'">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
              <el-menu-item index="1-3">选项3</el-menu-item>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>

el-menu  左侧菜单内容

属性

    <!--default-openeds: 默认打开-->
    <!--default-active:默认选中-->

el-submenu el-menu的子元素

index   文本类型，不能数字类型

 

 

 

 

实现一个基本页面结构

4个子功能模块，动态加载

 

 

 

App.vue

<template>
  <div class="home">
    <!--项目首页-->
    <router-view></router-view>
  </div>
</template>

router/index.js

路由配置，各个功能模块，子模块的名称，path等信息在此处配置完成。

import Vue from 'vue'
import VueRouter from 'vue-router'


import PageOne from "../views/PageOne";
import PageTwo from "../views/PageTwo";
import PageThree from "../views/PageThree";
import PageFour from "../views/PageFour";
import App from "../App";
import Index from "../views/Index";
Vue.use(VueRouter)
//routes  页面路径，组件名称的定义，
  const routes = [
  {
    path: '/',
    name: '导航1',
    component: Index,
    //默认打开PageOne
    redirect:"/PageOne",
    children:[
      {
        path: '/PageOne',
        name: 'page1',
        component: PageOne
      },
      {
        path: '/PageTwo',
        name: 'page2',
        component: PageTwo
      }
    ]
  },
  {
    path: '/',
    name: '导航2',
    component: Index,
    children:[
      {
        path: '/PageThree',
        name: 'page3',
        component: PageThree
      },
      {
        path: '/PageFour',
        name: 'page4',
        component: PageFour
      }
    ]
  },


]

const router = new VueRouter({
  routes
})

export default router

Index.vue

这个页面通过对router的操作，把各个页面组织起来

 

<template>
    <div class="home">
        <el-container style="height: 500px; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <!--核心代码，通过for循环动态引入子组件  -->
                <el-menu  router :default-openeds="['0','1']">
                    <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''" >
                        <template slot="title"><i class="el-icon-setting"></i>{{item.name}}</template>
                        <!--index动态绑定，就可以动态访问子组件-->
                        <el-menu-item v-for="(item2,index2) in item.children" :index="item2.path" :class="$route.path==item2.path?'is-active':''">
                            {{item2.name}}
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>查看</el-dropdown-item>
                            <el-dropdown-item>新增</el-dropdown-item>
                            <el-dropdown-item>删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span>王小虎</span>
                </el-header>

                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>


<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }
</style>

<script>
    export default {
        data() {
            return{

            }
        }
    };
</script>

其他

是各个独立功能模块具体实现

PageOne

PageTwo

PageThree

PageFour

 

 install --save element-ui  解决问题

出现如下编译报错时：

./node_modules/_element-ui@2.13.2@element-ui/lib/theme-chalk/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/_element-ui@2.13.2@element-ui/lib/theme-chalk/index.css) Module build failed (from ./node_modules/postcss-loader/src/index.js): Error: ENOENT: no such file or directory, open 'E:\Java\MyGitHub\gitee\blog\blogwang\vue-element-01\node_modules\_element-ui@2.13.2@element-ui\lib\theme-chalk\index.css'