② Vue3引入Element Plus

一、安装和引入element-plus

官网：https://element-plus.gitee.io/zh-CN/

#安装element-plus模块
npm install element-plus --save

全局引入element-plus

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

/*app.use(ElementPlus, { size: 'small', zIndex: 3000 })*/
/*在引入 Element Plus 时，可以传入一个包含 size 和 zIndex 属性的全局配置对象。 
size 用于设置表单组件的默认尺寸，zIndex 用于设置弹出组件的层级，zIndex 的默认值为 2000。*/

然后就能使用Element的组件了

按需引入element-plus（推荐）

首先需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

二、页面布局

整体的页面布局根据喜好选择Container布局容器的样式即可。
将Vue.app文件中的内容删除替换为以下代码

<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

将main.ts中引入的CSS也要注释掉或者删除

//import './assets/main.css'          //导入CSS样式表

三、组件的使用

比如我们要在Header的部分放个Nav导航条
1）在components组件文件夹新建Nav.vue文件
2）在App.vue中引入nav导航组件

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import Navbar from './components/Nav.vue'
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <Navbar/>
      </el-header>
      <el-container>
        <el-aside width="200px">
          Aside
        </el-aside>
        
        <el-main>
          Main
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

3）在Nav.vue文件中写入Navbar导航条的代码内容

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
  >
    <el-menu-item index="0">LOGO</el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="1">Processing Center</el-menu-item>
    <el-sub-menu index="2">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style>
.flex-grow {
  flex-grow: 1;
}
</style>

但是完成后他是下边这个样子的（没有预期的占满最上边一行），难道布局容器没生效？

解决办法？在index.html添加如下样式代码

<style>
       html,
       body,
       #app {
        display:contents;
       }
</style>

然后照猫画虎再添加个侧边栏导航

四、暗黑主题切换

1）项目入口核心文件main.ts 添加css样式引用

import 'element-plus/theme-chalk/dark/css-vars.css'

2）使用切换按钮的页面导入模块
我这里实在Nav.vue导航组件中设置的

<template>
...省略很多代码
<el-switch
      v-model="isDark"
      class="mt-2"
      style="margin-left: 24px"
      inline-prompt
      :active-icon="Moon"
      :inactive-icon="Sunny"
      />
</template>

<script lang="ts" setup>
	import { useDark } from '@vueuse/core'
	const isDark = useDark()
</script>