【deepseek用例生成平台-05】菜单模块和element-plus安装

我去热饭

发布于 2025-02-27 11:15:42

8400

代码可运行

文章被收录于专栏：测试开发干货测试开发干货

运行总次数：0

代码可运行

上节课我们成功展示了首页：HomeNew

本节课来搞这个菜单组件:Menu.vue

菜单在每个页面的左侧都可以出现，所以是一个公共调用的组件，这种小组件都在components文件夹内，并且我们之前也在里面写上了一个代表身份的标题：

这里我们需要改下名字，把Menu.vue改成LeftMenu.vue

因为按照这次的规范要求来看，组件是不能用单一单词命名的，所以这里提前改下，以便之后麻烦。

然后就是把它引入到其他页面中，比如我们已经有的 HomeNew.vue中。

引入的步骤有三部，都在HomeNew.vue中实现：

仔细观察上图，第一步是先 import .... 意思是把LeftMenu.vue引入。

第二步是在下面新建components:{} 属性，并里面写上LeftMenu意思是挂载这个组件。

第三步是在上面用LeftMenu为标签对，写在哪，就会显示在哪。

然后启动前端vue服务：npm run serve命令，然后进入网页：http://localhost:8080/#/homenew

结果如下：

可以看到 “我是菜单” 四个字已经出现，这代表菜单组件LeftMenu.vue已经被成功加载进首页HomeNew.vue中了。

有的同学就想问了，上面的Home|About 是什么鬼？

回答：这就是App.vue母体组件里面设置的，你点开看一下：

上面的Home , About都是写死在母体超链接。可以进入对应的其他页面。

而下面的router-view，才是我们正常显示的的内容。

我们可以删除上面的俩个超链接，只留下router-view：

然后刷新页面就看不到了：

然后我们发现，这个菜单应该是在左侧的，这个要怎么实现呢？

这里就要提出我们的首页排版了，具体排版需要靠的是elementUI的组件el-container

不过到现在，我们还没有安装elementUI这个库，所以需要先在Terminal面板通过命令安装：

（可以先通过ctrl+c强制终止vue前端服务）

安装命令为：

npm install element-plus --save

然后我们打开我们的main.js进行简单配置后才可以用：

可直接复制到mani.js，但要先删除以前的createApp那句：

import ElementPlus from 'element-plus'
import local from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/theme-chalk/index.css'
createApp(App).use(router).use(ElementPlus,{local}).mount('#app')

好，接下来我们要做俩件事，没有先后顺序。

一，就是刚刚说的首页排版

二，菜单组件的外形开发

先来看菜单组件LeftMenu.vue的内容，使用了el-menu组件，要改成如下: （可复制）

<template>
     <el-menu
        style="height: 750px"
        router
       >
            <el-menu-item index="/">【回到首页】</el-menu-item>
           <el-menu-item index="/" >进入哪里哪里</el-menu-item>
            <el-menu-item  index="/">进入什么什么</el-menu-item>

           <el-sub-menu index="2">
                <template #title>平台设置</template>
               <a href="http://127.0.0.1:8000/admin/" style="text-decoration: none" target="_blank"> <el-menu-item>后台管理</el-menu-item></a>
            </el-sub-menu>
           <el-menu-item index="/" >获取帮助</el-menu-item>
           <el-menu-item index="/" >反馈建议</el-menu-item>
       </el-menu>
</template>

<script>
    export default {
        name: "LeftMenu"
    }
</script>

<style scoped>

</style>

上图中，el-menu-item标签就是每个子菜单，其中的index属性就是点击后要跳转到哪的前端路由，下面那个el-sub-menu是组合菜单。template是组合菜单的名字，a标签是外链超链接。我只是展示了几种子菜单而已。

再来看看首页HomeNew.vue，使用了el-container布局组件。（可复制）

<template>
    <el-container>

        <el-aside>
            <LeftMenu></LeftMenu>
        </el-aside>

        <el-container>
            <el-header>我是顶部栏</el-header>
            <el-main>我是中部</el-main>
            <el-footer>我是底部</el-footer>
        </el-container>

    </el-container>

</template>

<script>
    import LeftMenu from '../components/LeftMenu.vue'
    export default {
        name: "HomeNew",
        components:{
            LeftMenu
        }
    }
</script>

<style scoped>


</style>

如上图所示，el-container就是布局的外框母体，里面分为el-aside左侧布局，还有另一个el-container，嵌套进去，把右侧部分又分为上中下：el-header/main/footer

最后的展示如图：