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 动态路由权限控制
文章目录
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 组件布局的布局效果。
本文为博主原创文章,任何个人、团体、机构转载和摘录,请注明出处。