当前位置：首页 > news >正文

SSM整合项目（使用Vue3 + Element-Plus创建项目基础页面）

news 来源：原创 2024/7/8 22:06:46

1.配置Vue启动端口

1.修改vue.config.js

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true
})
module.exports = {devServer: {port: 9999 //启动端口}
}

2.启动

2.安装Element Plus

命令行输入 `npm install element-plus --save`

3.修改Vue3默认样式并自定义一个组件

1.修改App.vue

1.删除原有结构

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

2.启动项目查看

2.修改HomeView.vue

<template><div></div>
</template><script>export default {name: 'HomeView',components: {}
}
</script>

3.删除HelloWorld.vue组件

4.创建一个组件 src/components/Header.vue

1.组件解释

2.代码

<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>

5.App.vue引入组件

<template><div><!--使用Header组件--><Header></Header>Home页面</div>
</template>
<script>
//引入Header组件
import Header from "@/components/Header.vue";
//导出Header组件，当前Vue组件的名字为Layout
export default {name: "Layout",components: {Header}
}
</script>
<style></style>

6.本阶段总结

4.创建全局的global.css并引入

1.目录

2.代码

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

3.解释

4.在main.js引入

5.main.js引入Element-Plus

1.修改main.js

2.测试Element-Plus是否生效

1.打开Element-Plus官方文档，查找一个按钮组件

2.放到App.vue中

3.查看页面，报错

4.尝试解决问题

1.alt + enter安装组件

2.但是报错

Cannot install Node.js module: D:\nodejs(14.17.3)\npm.cmd install element-plus --save Standard error: ‘D:\nodejs’ ��ڲ��ⲿ��Ҳ��ǿ��еĳ�� ļ��

5.重装nodejs

1.这次存放在nodejs文件夹下，之前的文件夹是带中文括号的，不知道是不是这个原因

2.配置IDEA的nodejs

3.再次尝试运行，又报错，这次是解释器的问题

Cannot install Node.js module: please specify default Node.js interpreter.

6.配置一下IDEA的Node.js的解释器

7.再次尝试安装，成功！

8.启动项目，成功出现按钮

6.显示个人信息和退出登录的下拉框

1.需求分析

2.去组件库找到下拉框的组件

3.修改自定义组件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"><el-dropdown><span class="el-dropdown-link">Tom</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>

4.效果展示

7.创建侧边栏并调整布局

1.需求分析

2.查找侧边栏组件

3.粘贴到src/components/Aside.vue并修改

<script setup></script><template>
<!--  引入导航菜单--><div><el-menu style="width: 200px"default-active="2"class="el-menu-vertical-demo"><el-sub-menu index="1"><template #title><el-icon><location /></el-icon><span>导航一</span></template><el-menu-item-group title="组一"><el-menu-item index="1-1">选项一</el-menu-item><el-menu-item index="1-2">选项二</el-menu-item></el-menu-item-group><el-sub-menu index="1-4"><template #title>选项四</template><el-menu-item index="1-4-1">选项一</el-menu-item></el-sub-menu></el-sub-menu><el-menu-item index="2"><el-icon><icon-menu /></el-icon><span>导航二</span></el-menu-item><el-menu-item index="3" disabled><el-icon><document /></el-icon><span>导航三</span></el-menu-item><el-menu-item index="4"><el-icon><setting /></el-icon><span>导航四</span></el-menu-item></el-menu>  </div>
</template><style scoped></style>

4.修改App.vue引入Aside组件并布局

<template><div><!--  布局--><div><!--header组件--><Header/><!--主体，弹性布局--><div style="display: flex"><!--侧边栏--><Aside/><!--内容区域，这个部分通过路由来展示，这里路由到HomeView, flex: 1--><!--这里路由的view默认是/也就是HomeView组件--><router-view style="flex: 1"/></div></div></div>
</template>
<script>
//引入Header组件
import Header from "@/components/Header.vue";
//引入Aside
import Aside from "@/components/Aside.vue";
//导出Header组件，当前Vue组件的名字为Layout
export default {name: "Layout",components: {Header,Aside}
}
</script>
<style></style>

5.在路由到的组件HomeView随便放入一个Element组件测试

<template><div><el-empty description="description" /></div>
</template><script>export default {name: 'HomeView',components: {}
}
</script>

6.结果展示

8.修改HomeView.vue添加斑马表格

1.找到组件

2.修改HomeView.vue

<template><div><el-table :data="tableData" stripe style="width: 100%">
<!--      把width去掉，就会自适应--><el-table-column prop="date" label="日期"/><el-table-column prop="name" label="名字"/><el-table-column prop="address" label="地址" /></el-table></div>
</template><script>export default {name: 'HomeView',components: {},//增加一个data，单项绑定tableDatadata() {return {tableData: [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},]}}
}
</script>

3.结果展示

9.Element-Plus国际化

1.官方文档

2.修改main.js进行国际化

3.当表格没有数据时就是中文的暂无数据了

10.从官网设置测试数据，并支持日期排序

1.修改HomeView.vue

2.data更新为中文数据

3.结果展示

11.添加相关的操作按钮和搜索框

1.需求分析

2.修改HomeView.vue

1.增加按钮

<template><div><!--增加按钮和搜索框--><!--magrin代表上下边距为10px，左右边距为5px--><div style="margin: 10px 5px"><el-button type="primary">新增</el-button><el-button>其他</el-button></div><!--再增加一个搜索框并设置边距--><div style="margin: 10px 5px"><!--搜索框，双向绑定一个search--><el-input v-model="search" style="width: 30%" placeholder="请输入关键字"/><el-button type="primary">查找</el-button></div><el-table :data="tableData" stripe style="width: 90%"><!--把width去掉，就会自适应--><el-table-column sortable prop="date" label="日期"/><el-table-column prop="name" label="名字"/><el-table-column prop="address" label="地址"/><!--在表格的最后一列加入两个超链接--><el-table-column fixed="right" label="操作" width="100"><template #default><el-button type="text">编辑</el-button><el-button type="text">删除</el-button></template></el-table-column></el-table></div>
</template>