Vue实训---3-element plus的使用与布局

1.引入ElementPlus

ElementPlus官网指南：快速开始 | Element Plus

在我们的项目main.js文件中，加入红框里的内容：

import { createApp } from 'vue'
import App from './App.vue'
// 引入全局样式，是对样式的初始化
import "@/assets/less/index.less"
// 引入路由
// import router from './router'
import router from '@/router/index.js'
// 引入 element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 将之前的createApp(App).mount('#app') 拆开写，并在其中引入路由
// 创建vue实例
const app = createApp(App)
// 注入路由
app.use(router)
// 注入 element-plus
app.use(ElementPlus)
// 挂载到DOM上
app.mount('#app')

2.简单使用ElementPlus组件

ElementPlus官网对于每种组件都给出了代码示例。

例如：Button 按钮 | Element Plus中，

 将官网示例代码粘贴到我们的App.vue中，顺便对#app设置全局样式：

<script setup>

</script>

<template>
    <router-view></router-view>
    <div>
        <el-button>Default</el-button>
        <el-button type="primary" plain>Primary plain</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning" round>Warning round</el-button>
        <el-button type="danger" :icon="Delete" circle> 危险</el-button>
    </div>
</template>

<style> 
/* scoped的作用是只在当前组件生效，我们这里设置的是全局样式，所以去掉scoped */、
/* 设置样式，让app组件占满整个屏幕，为什么是#app，因为我们在main.js中挂载的根组件就是#app，这样设置就是让根组件占满整个屏幕，不让页面显示滚动条*/
#app {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>

在vscode终端运行命令：

npm run dev

浏览器显示：

效果出现后，可以将这些el-button代码删掉，这样就不会影响我们后续的项目。

3.使用ElementPlus图标

3.1 引入图标

官网Icon 图标 | Element Plus中给出了图标的引入方式：

我们将这些代码加入到main.js中：

import { createApp } from 'vue'
import App from './App.vue'
// 引入全局样式，是对样式的初始化
import "@/assets/less/index.less"
// 引入路由
// import router from './router'
import router from '@/router/index.js'
// 引入 element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入 element-plus 的图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// 将之前的createApp(App).mount('#app') 拆开写，并在其中引入路由
// 创建vue实例
const app = createApp(App)
// 注入路由
app.use(router)
// 注入 element-plus
app.use(ElementPlus)
// 注入 element-plus 的图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
// 挂载到DOM上
app.mount('#app')

3.2 ElementPlus页面布局

Container 布局容器 | Element Plus中给出了示例。

我们选择下图的示例：

我们期望将Main.vue文件做成下图的样子：

修改Main.vue文件，将官网代码复制过来，然后加上样式：

<template>

  <div class="common-layout">
    &