vite+vue3+ts中路由element-puls的使用
请按照我的上述文章(vite+vue3+ts新手使用教程)安装vite+vue3+ts等
安装element-puls组件库
pnpm install element-plus --save
pnpm install @element-plus/icons-vue //icon图片安装
main.ts引入
正常使用
import {
createApp } from 'vue';
import App from './App.vue';
//element-puls
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
const app = createApp(App);
//element-puls
app.use(ElementPlus);
app.mount('#app');
在管理后台中使用后台列表
<template>
<div class="container" style="background-color: #f2f5f9;">
<div class="menu-container">
<el-menu background-color="rgb(50, 65, 87)" text-color="#fff" active-text-color="#ffd04b" :router="true"
:default-active="defaultActive" class="el-menu-vertical-demo" :default-openeds="['1']" :collapse="counter">
<div class="top-left" :style="{ fontSize: counter ? '8px' : '20px' }">
蓝象助贷管理后台
</div>
<el-menu-item index="/home">
<!-- 一级菜单 -->
<el-icon>
<Tickets />
</el-icon>
<span>首页</span>
</el-menu-item>
<el-menu-item index="2">
<!-- 一级菜单 -->
<el-icon>
<User />
</el-icon>
<span>客户管理</span>
</el-menu-item>
<el-sub-menu index="3">
<!-- 一级菜单 -->
<template #title>
<el-icon>
<Setting />
</el-icon>
<span>设置</span>
</template>
<!-- 二级菜单 -->
<el-menu-item-group>
<el-menu-item index="/employeeList">员工列表</el-menu-item>
<el-menu-item index="3-2">品牌设置</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
</el-menu>
</div>
<div class="main-container">
<div class="box-body">
<RouterView />
</div>
</div>
</div>
</template>
<script setup lang="ts">
import {
ref } from 'vue'
import {
Menu as Setting, Tickets, User } from '@element-plus/icons-vue'
import {
RouterView } from 'vue-router'
let counter = false
let defaultActive = ref('/home');
</script>
<style scoped lang="scss">
.container {
width: 100%;
height: 100vh;
display: flex;
overflow: hidden;
.menu-container {
height: 100%;
overflow-y: auto;
color: #fff;
text-align: center;
&::-webkit-scrollbar {
width: 0;
}
.el-menu {
height: 100%;
}
// .el-menu--vertical
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 250px;
:deep(.el-menu-item-group__title) {
padding: 0;
}
}
}
.main-container {
flex: 1;
overflow-y: auto;
padding: 20px;
}
.top-left {
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
cursor: default;
}
}
.box-body {
padding: 24px 0;
}
</style>
如果项目使用时出现问题找不到模块“element-plus”或其相应的类型声明的问题需要
在根目录创建Element-puls.d.ts文件
//文件内容
export {
}
declare global {
const ElMessage:typeof import('element-plus')['ElMessage']
const ElLoading:typeof import('element-plus')['ElLoading']
}