搭建Vue 3 + Element Plus + Axios + SSM架构的前后端分离项目——第二步实践指南

最编程 2024-07-22 07:27:52

...

SSM–搭建Vue 前端工程–项目基础界面

实现功能02-创建项目基础界面

需求分析

效果图

思路分析

使用Vue3+ElementPlus 完成。

代码实现

修改ssm_vue\src\App.vue 成如下形式, 会删除部分用不上的代码，增加

<template>
<div>
</div>
</template>
<style>
</style>

修改ssm_vue\src\views\HomeView.vue ,

<template>
<!-- 去掉class="home"-->
<div>
 
</div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
 
export default {
    name: 'HomeView',
    components: {
        // HelloWorld
    }
}
</script>

删除ssm_vue\src\components\HelloWorld.vue
创建ssm_vue\src\components\Header.vue

<template>
    <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc;
    display: flex">
        <div style="width: 200px; padding-left: 30px; font-weight: bold; color:
    dodgerblue">后台管理</div>
        <div style="flex: 1"></div>
        <div style="width: 100px">下拉框</div>
    </div>
</template>
<script>
    export default {
        name: "Header"
    }
</script>
<style scoped>
</style>

修改ssm_vue\src\App.vue , 引入Header 组件

<template>
    <div>
        <Header/>
        Home
    </div>
</template>
<style>
</style>
<script>
    import Header from "@/components/Header";
    export default {
        name: "Layout",
        components: {
            Header
        }
    }
</script>

创建全局的global.css(先准备着, 后面有用) , 以后有全局样式就可以写在这里,ssm_vue\src\assets\css\global.css

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

修改ssm_vue\src\main.js , 引入global.css

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/css/global.css'
createApp(App).use(store).use(router).mount('#app')

修改ssm_vue\src\main.js, 引入Element Plus , 并测试, 如何引入，文档https://element-plus.gitee.io/zh-CN/guide/quickstart.html

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/css/global.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

修改ssm_vue\src\App.vue , 引入一个el-button, 看看是否生效

<template>
    <div>
        <Header />
        Home <el-button>我的按钮</el-button>
    </div>
</template>
<style>
</style>
<script>
    import Header from "@/components/Header";
    export default {
        name: "Layout",
        components: {
            Header
        }
    }
</script>

修改ssm_vue\src\components\Header.vue , 引入下拉框, 文档https://doc-archive.element-plus.org/#/zh-CN/component/dropdown 【是旧版对应的文档】

<template>
    <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display:flex">
        <div style="width: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue">后台管理</div>
 
        <div style="flex: 1"></div>
        <div style="width: 100px">
            <el-dropdown>
                <span class="el-dropdown-link">
                    tom
                <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>个人信息</el-dropdown-item>
                        <el-dropdown-item>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
<script>
    export default {
        name: "Header"
    }
</script>
 
<style scoped>
</style>

-----运行效果—

创建侧边栏组件, 并引入导航菜单组件ssm_vue\src\components\Aside.vue , 参考文档https://doc-archive.element-plus.org/#/zh-CN/component/menu

粘贴的代码要注意:

<template>
    <div>
        <!-- 说明-->
        <!-- 先去掉, 这两个方法, 否则会报错-->
        <!-- @open="handleOpen"-->
        <!-- @close="handleClose"-->
        <el-menu default-active="2" class="el-menu-vertical-demo">
            <el-sub-menu index="1">
                <template #title>
                    <i class="el-icon-location"></i>
                    <span>导航一</span>
<

上一篇：实操案例：基于layui、SSM和SpringBoot的仓库信息管理系统

下一篇：简易SSM集成实战教程 - 亲民小项目解析