路由搭建、引入element-plus和ElementPlusIconsVue、初步对Main组件的布局进行静态搭建。

1 路由搭建

在src下创建router文件夹，其中创建index.js。

1.1 路由创建(router/index.js)

(1)这个createRouter是用来创建router的，createWebHashHistory则是创建hash模式，如果使用hash模式则会在地址栏带有一个#号。
(2)组件使用懒加载的方式引入。

import {createRouter, createWebHashHistory} from 'vue-router'
// 制定路由规则
const routes = [{path: '/',name: 'main',component: () => import('@/views/Main.vue')}
]const router = createRouter({// 设置路由模式history: createWebHashHistory(),routes
})export default router;

1.2 路由组件(views/Main.vue)

路由组件是与Vue Router路由配置直接关联的组件，当访问某个URL路径时，该组件会被渲染到RouterView中。

<template><div>我是main组件</div>
</template><script setup>
</script><style scoped>
</style>

1.3 路由引入并注册(main.js)

在main.js中：
当使用import关键字加载库或模块时，这被称为“引入”。
当使用 .component()、.use()等方法把组件或插件添加到Vue应用实例中时，这就叫做“注册”。

两者都是构建Vue应用不可或缺的部分。

import { createApp } from 'vue'
import App from './App.vue'
import '@/assets/less/index.less';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');

1.4 路由渲染(App.vue)

(1)router-view：这是Vue Router在Vue 2中的传统用法。尽管在Vue 3中仍然支持这种写法，但是推荐的方式已经发生了变化。
(2)RouterView：Vue 3推荐使用的写法。使用PascalCase形式的自定义组件标签(如RouterView)变得更为常见和规范。

<template><RouterView/>
</template><script setup>
</script><style scoped>
</style>

2 element-plus的应用

Element Plus是一个基于Vue 3的现代化桌面端UI组件库，是Element UI(用于Vue 2)的升级版本。它由饿了么(Eleme)团队开发并开源，广泛应用于中后台管理系统(如Admin系统、CRM、ERP等)的前端开发。
三种使用方式:
(1)完整引入【推荐】。
(2)自动导入。
(3)手动导入。

2.1 完整引入并注册(main.js)

import { createApp } from 'vue'
import App from './App.vue'
import '@/assets/less/index.less';
import router from './router';import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';const app = createApp(App);app.use(router);
app.use(ElementPlus);
app.mount('#app');

2.2 示例应用(App.vue)

<template><RouterView/><button>html自带的</button><el-button>默认element-plus</el-button>
</template><script setup>
</script><style>#app{width: 100%;height: 100%;overflow: hidden;}
</style>

用于对id为app的根元素进行样式设置，设置Vue应用根容器的样式：

(1)width: 100%和height: 100%：使应用容器占满父元素的全部宽度和高度。
(2)overflow: hidden：隐藏超出容器边界的内容，防止出现滚动条。
通常用于创建全屏应用布局，确保内容不会溢出显示。

3 ElementPlusIconsVue的应用

ElementPlusIconsVue是Element Plus官方提供的一个Vue 3兼容的图标组件库，全名为@element-plus/icons-vue。它包含了Element Plus设计体系下的所有SVG图标，并将每个图标封装为一个独立的Vue组件。

3.1 图标引入并注册(main.js)

import { createApp } from 'vue'
import App from './App.vue'
import '@/assets/less/index.less';
import router from './router';import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
//引入ElementPlusIconsVue 中所有的组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue';const app = createApp(App);//for循环，注册ElementPlusIconsVue 的组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component);
}app.use(router);
app.use(ElementPlus);
app.mount('#app');

将ElementPlusIconsVue中导出的所有图标组件，全部注册为全局组件，组件名为其对应的 key(即图标名)，之后可以在模板中直接使用这些图标。

3.2 示例应用(App.vue)

<template><el-icon><Search /></el-icon><el-icon><Plus /></el-icon><el-icon><Avatar /></el-icon>
</template>

4 Main组件的初步搭建

4.1 整体布局

一般后台管理的布局就是左侧菜单栏，然后右侧的上面有一个导航栏，右侧的下面就是要展示的页面。
进入到不同的页面，左侧的菜单和头部导航栏都是不变的，所以我们用一个Main组件来做布局。

src/views/Main.vue。
src/components/ComonHeader.vue。
src/components/ComonAside.vue。

4.2 Main.vue

4.2.1 样式设计

要让height: 100%正常工作，父元素(如html, body)也需要设置高度，这部分是在reset.less文件中提前设置的：

某些情况下即使没有明确在元素上写类名也能使用类选择器的情况，那可能是因为：
(1)默认类名：一些UI库组件如Element Plus的组件可能有默认的类名，这些默认类名可以在文档中查到，并且可以直接在CSS中使用。
(2)全局样式：如果没有使用scoped属性，那么样式是全局的，可能会应用到符合选择器的所有元素，无论这些元素是否位于当前组件内。

4.2.2 页面布局(Container)

用于布局的容器组件，方便快速搭建页面的基本结构：
(1)el-container：外层容器。 当子元素中包含 el-header>或 el-footer>时，全部子元素会垂直上下排列， 否则会水平左右排列。
(2)el-header：顶栏容器。
(3)el-aside：侧边栏容器。
(4)el-main：主要区域容器。
(5)el-footer：底栏容器。

<template><div class="commom-layout"><el-container class="lay-container"><CommonAside/><el-container><el-header class="el-header"><CommonHeader/></el-header><el-main class="right-main">main</el-main></el-container></el-container></div>
</template><script setup>
</script><style scoped lang="less">.commom-layout,.lay-container{height: 100%;}.el-header{background-color: #333;}
</style>

因为左侧的菜单栏还未添加，所以页面如下所示：

5 附录

5.1 PascalCase命名约定

PascalCase形式	对应含义
UserProfile		用户资料
ShoppingCart	购物车
LoginForm		登录表单
RouterView		路由视图组件
MyCustomButton	自定义按钮组件

5.2 参考附录

参考elementplus官网地址
参考vue3实现通用后台管理（傻瓜式一步一步记录代码实现过程）