vue3+ElementPlus后台管理搭建（一）

vue3+ElementPlus后台管理搭建（一）

基础布局+侧边栏

1. 项目创建

   创建项目时选择vue3.x，同时选择vue-router 和vuex

   项目结构：
   

2. element-plus安装

2.1安装

yarn add element-plus

2.2引用
在vue项目中，打开 main.js文件

......
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(store).use(router).use(ElementPlus).mount(#app)

3. 布局

3.1布局组件
在layout中创建index.vue
3.2内容选用
使用elementplus官网，选择组件中的Container布局容器，这里我们挑一个有头有脚还有边的布局。

在index.vue中引用，启动项目即可看到页面状态

<template>
   <el-container>
     <el-aside width="200px">Aside</el-aside>
     <el-container>
       <el-header>Header</el-header>
       <el-main>Main</el-main>
       <el-footer>Footer</el-footer>
     </el-container>
   </el-container>
</template>

如果不想要这里的边框，可以在public/index.heml里面添加<style> body{ margin: 0; } </style>

4. 路由设计

     这里我们将APP.vue作为一级路由出口，所以里面内容也很简单

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

因此，在我们的router里面是这样设计的，后台的首页就是Layout，在此基础上设计二级路由，简单了解一下父子关系并创建对应的vue文件，以免启动的时候报错
router =>index.js

import {
    createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/layout/index.vue'

const routes = [
  {
   
    path: '/',
    component: Layout,
  },
  {
   
    path: '/wel',
    name: 'wel',
    component: Layout,
    children: [{
   
      path: 'index',
      component: () => import('@/views/wel/index.vue'),
    }]
  },
  {
   
    path: '/permissions'