请使用element plus和v-slot 、pinia实现一个清新的后台模版，不适用ts语言

好的，这里是一个使用 Element Plus、v-slot 和 Pinia 实现的清新后台模板的示例代码，使用的是 JavaScript 语言：

<template>
  <div class="app-container">
    <el-container>
      <el-header>
        <div class="header-logo">清新后台模板</div>
      </el-header>
      <el-main>
        <div class="main-container">
          <el-menu :default-openeds="defaultOpeneds" :default-active="defaultActive" class="sidebar-menu" background-color="#f4f4f5" text-color="#333" active-text-color="#409EFF" @select="handleMenuSelect">
            <el-submenu index="1">
              <template v-slot:title>
                <i class="el-icon-location"></i>
                <span>导航一</span>
              </template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template v-slot:title>
                <i class="el-icon-menu"></i>
                <span>导航二</span>
              </template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template v-slot:title>
                <i class="el-icon-setting"></i>
                <span>导航三</span>
              </template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>
              <el-menu-item index="3-3">选项3</el-menu-item>
            </el-submenu>
          </el-menu>
          <div class="content-container">
            <router-view></router-view>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { useStore } from 'pinia'
import { ElMenu, ElSubmenu, ElMenuItem, ElHeader, ElMain, ElContainer } from 'element-plus'

export default defineComponent({
  name: 'App',
  components: {
    ElMenu,
    ElSubmenu,
    ElMenuItem,
    ElHeader,
    ElMain,
    ElContainer
  },
  setup() {
    const store = useStore()

    const defaultOpeneds = ['1']
    const defaultActive = '1-1'

    const handleMenuSelect = (index) => {
      console.log('menu select:', index)
    }

    return {
      defaultOpeneds,
      defaultActive,
      handleMenuSelect
    }
  }
})
</script>

<style>
.app-container {
  height: 100%;
}

.header-logo {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.main-container {
  display: flex;
  height: 100%;
}

.sidebar-menu {
  width: 200px;
}

.content-container {
  flex: 1;
  padding: 20px;
}
</style>

这段代码使用了 Element Plus 组件库中的 ElMenu、ElSubmenu、ElMenuItem、ElHeader、ElMain、ElContainer 等组件来实现页面布局，使用了 v-slot 来定义菜单标题的模板，使用 Pinia 来管理应用程序状态。页面风格清新、简洁，可以作为后台管理系统的基础模板，开发者可以根据具体需求进行修改和扩展。