12-Vite2引入Element-Plus框架

Vite2+Vue3+TypeScript+Element-plus脚手架搭建系列

✅01-初始化 Vite 项目
✅02-配置 Vite2 环境变量
✅03-Vite2 配置及说明
✅04-Vue3 使用 SCSS
✅05-Vue3 路由配置
✅06-TypeScript 配置及说明
✅07-Vue3 使用 axios
✅08-Vue3 axios 对象封装
✅09-ESLint 配置及说明
✅10-ESLint 与 Prettier 集成配置及说明
✅11-Mock.js 模拟接口数据
✅12-Vite2 引入 Element-Plus 框架
✅13-渐变+透明样式实现清爽登录页
✅14-Element-Plus 实现后台管理系统布局
✅15-Pinia 实现 store 状态管理
✅16-Vue3 动态路由权限控制

---

源码地址：GitHub / 码云

---

Vite2 引入 Element-Plus 框架

🎯 目标

引入 Element-plus 组件库（组件按需引入），且用 Element-plus 组件完成页面布局。

😴 功课

Element-Plus 是目前主流的前端组件库之一，官方文档 。

🍸 准备

安装依赖

npm install -S element-plus

更新依赖

没更新依赖前项目启动一直报错，爬了很久才爬出坑。

npm install -S vue@3.2.12 @vue/compiler-sfc@3.2.12

调整文件&目录

在 src 目录下创建 config/element 文件夹，用来存放 Element-Plus 配置文件。

Element-Plus 配置文件目录结构如下：

📁 src

----📁 config

--------📁 element

------------📄 index.ts

🌈 Coding

Element-Plus 配置文件

在 /src/config/element/index.ts 配置需要引入 Element-Plus 组件：

import { App } from 'vue'
import { ElContainer, ElAside, ElHeader, ElMain, ElFooter } from 'element-plus'

const components = [ElContainer, ElAside, ElHeader, ElMain, ElFooter]

export function useElementComponents(app: App): void {
  components.forEach((component) => {
    app.component(component.name, component)
  })
}

引入 Element-Plus

在 main.ts 中引入 Element-Plus 组件和样式：

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router/index'
import 'element-plus/dist/index.css'
import { useElementComponents } from '@/config/element'

import '@/mock/index'

createApp(App).use(router).use(useElementComponents).mount('#app')

修改全局样式

在 src/styles/index.ts 修改 body 样式：

@import './variable/color.scss';
@import './common/font.scss';

body {
  margin: 0;
}

修改页面布局

在 src/components/layout/index.vue 用 Element-Plus 组件重新布局：

<template>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <!-- ↓layout路由视图 -->
        <router-view></router-view>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</template>

<script>
import '@/styles/index.scss'
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Layout',
})
</script>

<style lang="scss" scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 200px;
  height: 100vh;
}

.el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
}
</style>

🎭 结果

显示使用 Element-Plus 组件布局的布局效果。

---

本文为博主原创文章，任何个人、团体、机构转载和摘录，请注明出处。