路由搭建、引入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實現通用后臺管理（傻瓜式一步一步記錄代碼實現過程）