vite+vue3+ts でのルーティング要素-puls の使用

vite+vue3+ts でのルーティング要素-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'] 
}