一、搭建项目

vue create 项目名称

二、配置element-plus组件库

2.1 安装（在项目中安装）

npm install element-plus //生产依赖[https://element-plus.gitee.io/zh-CN/guide/installation.html]
npm install -D unplugin-vue-components unplugin-auto-import //开发依赖[https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5]

2.2 在vue.config.js中配置

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  },
})

2.3 重启项目

npm run serve

三、使用ElementPlus搭建主面板

elementPlus

3.1 创建主面板文件（src->layout->index.vue）

3.2 复制需要的组件

在elementplus->布局容器里面复制需要的组件代码到src->layout->index.vue

3.3 配置路由（router->index.js）

{
    path: '/',
    name: 'main',
    component: ()=>import('../layout/index.vue')//懒加载
}

3.4 在App.vue里面呈现

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

四、搭建侧边菜单

4.1 创建侧边菜单文件（layout->components->side-menu.vue）

4.2 复制需要的组件

在elementplus->菜单里面复制需要的组件代码到（layout->components->side-menu.vue）

4.3 在主面板（layout->index.vue）中引入侧边菜单组件

hmlt：
<el-aside width="200px">
        <sideMenu/>
</el-aside>
js：
<script>
    import sideMenu from './components/side-menu.vue'
    export default {
        components:{
            sideMenu
        }
    }
</script>

4.4 调整样式

html:
<el-aside class="menu-cont" width="200px">
        <sideMenu/>
</el-aside>
css:
<style lang="scss" scoped>
.menu-cont {
    height: 100vh;
    background-color: #545c64;
}
</style>

五、使用 normalize.css 重置项目样式

将样式改为新的标准模式文档

5.1 安装

npm i normalize.css

5.2 main.js 中引入

import 'normalize.css'

六、子组件配置（main部分）

6.1 创建子组件

6.2 配置子路由（router->index.js）

{
    path: '/',
    name: 'main',
    component: ()=>import('../layout/index.vue'),//懒加载
    children:[
      {
        path:'/classify/list',
        component:()=>import('../views/classify/list.vue')
      },
      {
        path:'/classify/pub',
        component:()=>import('../views/classify/pub.vue')
      },
      {
        path:'/dashboard',
        component:()=>import('../views/dashboard.vue')
      }
    ]
},

6.3 呈现子组件（layout->index.vue）

<el-main>
    <router-view></router-view>
</el-main>

七、动态生成侧边菜单

1、设置元信息meta（router->index.js）

children:[
      {
        path:'/classify/list',
        component:()=>import('../views/classify/list.vue'),
        meta:{//元信息
          label:'分类列表'//label是自定义的
        }
      },
      {
        path:'/classify/pub',
        component:()=>import('../views/classify/pub.vue'),
        meta:{//元信息
          label:'分类发布'//label是自定义的
        }
      },
      {
        path:'/dashboard',
        component:()=>import('../views/dashboard.vue'),
        meta:{//元信息
          label:'可视化图表'//label是自定义的
        }
  }

2、拿到数据动态生成菜单（layout->components->side-menu.vue）

html:
<template>
    <div>
        <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        router
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>分类管理</span>
          </template>
          <el-menu-item index="1-1">分类列表</el-menu-item>
          <el-menu-item index="1-2">分类发布</el-menu-item>
        </el-sub-menu>
        <el-menu-item v-for="item in menuData" :key="item.path" :index="item.path">
          <el-icon><setting /></el-icon>
          <span>{{item.meta.label}}</span>
        </el-menu-item>
      </el-menu>
    </div>
</template>
js:
<script>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import {routes} from '../../router/index'
export default {
    methods: {
        handleOpen(){},
        handleClose(){}
    },
    data(){
      return{
        menuData:routes[0].children
      }
    }
}
</script>

八、调整路由层级实现菜单级联

8.1、新建文件

<template>
    <div>
        <router-view></router-view>
    </div>
</template>

8.2、配置路由

{
    path: '/',
    name: 'main',
    component: () => import('../layout/index.vue'),//懒加载
    children: [
      {
        path: '/classify',
        component: () => import('../views/classify/index.vue'),
        meta: {
          label: '分类管理',
        },
        children: [
          {
            path: '/classify/list',
            component: () => import('../views/classify/list.vue'),
            meta: {//元信息
              label: '分类列表'//label是自定义的
            }
          },
          {
            path: '/classify/pub',
            component: () => import('../views/classify/pub.vue'),
            meta: {//元信息
              label: '分类发布'//label是自定义的
            }
          },
        ]
      },
      {
        path: '/dashboard',
        component: () => import('../views/dashboard.vue'),
        meta: {//元信息
          label: '可视化图表'//label是自定义的
        }
      }
    ]
  },

8.3 动态渲染菜单

<template>
  <div>
    <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      default-active="2"
      text-color="#fff"
      @open="handleOpen"
      @close="handleClose"
      router
    >
      <template v-for="item in menuData"
          :key="item.path">
        <el-sub-menu :index="item.path" v-if="item.children">
          <template #title>
            <el-icon><location /></el-icon>
            <span>{{ item.meta.label }}</span>
          </template>
          <el-menu-item v-for="ite in item.children" :index="ite.path">{{ite.meta.label}}</el-menu-item>
        </el-sub-menu>
        <el-menu-item
          :index="item.path"
          v-else
        >
          <el-icon><setting /></el-icon>
          <span>{{ item.meta.label }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

九、动态渲染ico图标

9.1 全局注册所有图标

在图标里面找到注册所有图标下面的代码，复制到main.js文件中去

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

9.2 选择合适的图标

在图标集合中找到合适的图标，复制并设置到路由中（router->index.js）

meta: {
  label: '分类管理',
  icon:'Grid'
},

9.3 绑定动态组件

在（layout->components->side-menu.vue）中动态绑定组件

<el-icon>
  <!-- 动态组件 -->
  <component :is="item.meta.icon"></component>
</el-icon>

十、路径别名配置

@vue/cli 默认开启了@路径别名
没有路径别名：../../../router/index.js
有路径别名：@/router/index.js

十一、搭建登录面板

11.1 新建登录组件文件

在views中新建文件login.vue文件，并在表单中找到合适的登录表单组件代码复制到该文件之中

11.2 配置路由

在router->index.js中配置登录的路由

{
    path:'/login',
    component:()=>import('@/views/login.vue')
},

11.3 使用栅格布局控制登录面板

十二、路由全局守卫（路由拦截）

导航守卫

// router全局前置守卫
let isLogin = true; //模拟登录状态
router.beforeEach((to, from, next) => {
  // to 去哪里
  // from  从哪儿来
  // next  调用后方可通过【通关文牒】
  // console.log(to, from, next);
  if (to.path.indexOf("login") == -1) {
    if (isLogin) {
      next(); //已登录用户直接放行
    } else {
      next("/login"); //没登录的用户，强行跳转到登录
    }
  } else {
    next(); //登录路由直接放行
  }
});

Vue - day08 （搭建项目）