element-ui 是基本的页面结构

卸载vue-cli

npm uninstall vue-cli -g 

安装vue-cli

npm install -g @vue/cli

 

 

标签

el-container  整个页面框架

el-aside  构建左侧菜单

      
        
        
        
          
            
              选项1
              选项2
              选项3
            
              
              选项4-1
            
          
        
      

el-menu  左侧菜单内容

属性

el-submenu el-menu的子元素

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

 

 

 

 

实现一个基本页面结构

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

 

 

 

App.vue

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的操作，把各个页面组织起来

 

其他

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

PageOne

PageTwo

PageThree

PageFour

 

 install --save element-ui  解决问题

出现如下编译报错时：

./node_modules/[email protected]@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/[email protected]@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\[email protected]@element-ui\lib\theme-chalk\index.css'