个人网站代码html,公司展示厅设计,深圳网站维护公司,天元建设集团有限公司信用代码文章目录 SSM--搭建Vue 前端工程--项目基础界面实现功能02-创建项目基础界面需求分析效果图思路分析 代码实现项目前后端分离情况项目前后端分离情况如图 注意事项和细节 SSM–搭建Vue 前端工程–项目基础界面
实现功能02-创建项目基础界面
需求分析
效果图 思路分析
使用V… 文章目录 SSM--搭建Vue 前端工程--项目基础界面实现功能02-创建项目基础界面需求分析效果图思路分析 代码实现项目前后端分离情况项目前后端分离情况如图 注意事项和细节 SSM–搭建Vue 前端工程–项目基础界面
实现功能02-创建项目基础界面
需求分析
效果图 思路分析
使用Vue3ElementPlus 完成。
代码实现
修改ssm_vue\src\App.vue 成如下形式, 会删除部分用不上的代码增加
template
div
/div
/template
style
/style修改ssm_vue\src\views\HomeView.vue ,
template
!-- 去掉classhome--
div/div
/template
script
// is an alias to /src
// import HelloWorld from /components/HelloWorld.vueexport default {name: HomeView,components: {// HelloWorld}
}
/script删除ssm_vue\src\components\HelloWorld.vue创建ssm_vue\src\components\Header.vue
templatediv styleheight: 50px; line-height: 50px; border-bottom: 1px solid #ccc;display: flexdiv stylewidth: 200px; padding-left: 30px; font-weight: bold; color:dodgerblue后台管理/divdiv styleflex: 1/divdiv stylewidth: 100px下拉框/div/div
/template
scriptexport default {name: Header}
/script
style scoped
/style修改ssm_vue\src\App.vue , 引入Header 组件
templatedivHeader/Home/div
/template
style
/style
scriptimport 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, 看看是否生效
templatedivHeader /Home el-button我的按钮/el-button/div
/template
style
/style
scriptimport 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 【是旧版对应的文档】 templatediv styleheight: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display:flexdiv stylewidth: 200px; padding-left: 30px; font-weight: bold; color: dodgerblue后台管理/divdiv styleflex: 1/divdiv stylewidth: 100pxel-dropdownspan classel-dropdown-linktomi classel-icon-arrow-down el-icon--right/i/spantemplate #dropdownel-dropdown-menuel-dropdown-item个人信息/el-dropdown-itemel-dropdown-item退出登录/el-dropdown-item/el-dropdown-menu/template/el-dropdown/div/div
/template
scriptexport default {name: Header}
/scriptstyle scoped
/style-----运行效果— 创建侧边栏组件, 并引入导航菜单组件ssm_vue\src\components\Aside.vue , 参考文档https://doc-archive.element-plus.org/#/zh-CN/component/menu 粘贴的代码要注意: templatediv!-- 说明--!-- 先去掉, 这两个方法, 否则会报错--!-- openhandleOpen--!-- closehandleClose--el-menu default-active2 classel-menu-vertical-demoel-sub-menu index1template #titlei classel-icon-location/ispan导航一/span/templateel-menu-item-grouptemplate #title分组一/templateel-menu-item index1-1选项1/el-menu-itemel-menu-item index1-2选项2/el-menu-item/el-menu-item-groupel-menu-item-group title分组2el-menu-item index1-3选项3/el-menu-item/el-menu-item-groupel-sub-menu index1-4template #title选项4/templateel-menu-item index1-4-1选项1/el-menu-item/el-sub-menu/el-sub-menuel-menu-item index2i classel-icon-menu/itemplate #title导航二/template/el-menu-itemel-menu-item index3 disabledi classel-icon-document/itemplate #title导航三/template/el-menu-itemel-menu-item index4i classel-icon-setting/itemplate #title导航四/template/el-menu-item/el-menu/div
/template
scriptexport default {name: Aside}
/script
style scoped
/style修改ssm_vue\src\App.vue, 将页面分成三个部分
templatediv!-- 头部--Header /!-- 主体--div styledisplay: flex!-- 侧边栏--Aside /!-- 内容区域,表格, 这个部分是从HomeView.vue 组件来的--router-view styleflex: 1 //div/div
/template
style
/style
scriptimport Header from /components/Header;import Aside from /components/Aside;export default {name: Layout,components: {Header,Aside}}
/script修改ssm_vue\src\views\HomeView.vue, 加入一个el-button,进行测试
templatedivel-button我的按钮/el-button/div
/template
script// is an alias to /srcexport default {name: HomeView,components: {}}
/script看看主页面的效果, 基本结构已经出来了 对主页面进行一个完善 比如导航栏的宽度 去掉不必要的子菜单等, 修改ssm_vue\src\components\Aside.vue
对主页面进行一个完善 比如导航栏的宽度去掉不必要的子菜单等, 修改SSM-Vue 整合项目Aside.vue
注意
先去掉, 这两个方法, 否则会报错。 open“handleOpen”。 close“handleClose”。
templatediv!-- 说明--!-- 先去掉, 这两个方法, 否则会报错--!-- openhandleOpen--!-- closehandleClose--el-menu stylewidth: 200px default-active2 classel-menu-vertical-demoel-sub-menu index1-4template #title选项4/templateel-menu-item index1-4-1选项1/el-menu-item/el-sub-menuel-menu-item index2i classel-icon-menu/itemplate #title导航二/template/el-menu-itemel-menu-item index3 disabledi classel-icon-document/itemplate #title导航三/template/el-menu-itemel-menu-item index4i classel-icon-setting/itemplate #title导航四/template/el-menu-item/el-menu/div
/template
scriptexport default {name: Aside}
/script
style scoped
/style修改ssm_vue\src\views\HomeView.vue , 引入表格,后面来显示数据, 参考文档 template!-- 去掉classhome--div!-- img altVue logo src../assets/logo.png--!-- HelloWorld msgWelcome to Your Vue.js App/--!-- el-button我的按钮/el-button --!-- 去掉字段的width, 让其自适应--el-table :datatableData stripe stylewidth: 90%el-table-column propdate label日期/el-table-columnel-table-column propname label姓名/el-table-columnel-table-column propaddress label地址/el-table-column/el-table/div
/template
script// is an alias to /src// import HelloWorld from /components/HelloWorld.vueexport default {name: HomeView,components: {// HelloWorld},data() {return {tableData: []}}}
/script可以看到 element-plus 默认是英文的, 我们将其国际化一下 https://doc-archive.element-plus.org/#/zh-CN/component/i18n , 修改ssm_vue\src\main.js import {createApp} from vue
import App from ./App.vue
import router from ./router
import store from ./store
import ElementPlus from element-plus
import element-plus/dist/index.css
import /assets/css/global.css
import zhCn from element-plus/es/locale/lang/zh-cn
createApp(App).use(store).use(router).use(ElementPlus,{locale: zhCn,}).mount(#app)------看效果------ 修改ssm_vue\src\views\HomeView.vue, 从官网设置一些测试数据, 并支持日期排序
template!-- 去掉classhome--div!-- img altVue logo src../assets/logo.png--!-- HelloWorld msgWelcome to Your Vue.js App/--!-- el-button我的按钮/el-button--el-table :datatableData stripe stylewidth: 90%el-table-column sortable propdate label日期/el-table-columnel-table-column propname label姓名/el-table-columnel-table-column propaddress label地址/el-table-column/el-table/div
/template
script// is an alias to /src// import HelloWorld from /components/HelloWorld.vueexport default {name: HomeView,components: {// HelloWorld},data() {return {tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路1518 弄,},{date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路1517 弄,},{date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路1519 弄,}]}}}
/script修改ssm_vue\src\views\HomeView.vue, 增加相关的操作按钮和搜索框, 参考el-input 组件文档, 表格的固定列文档 template!-- 去掉classhome--divdiv stylemargin: 10px 0el-button typeprimary新增/el-buttonel-button其它/el-button/div!-- 搜索--div stylemargin: 10px 0el-input v-modelsearch placeholder 请输入关键字 stylewidth:
30%/el-inputel-button stylemargin-left: 10px typeprimary查询/el-button/divel-table :datatableData stripe stylewidth: 90%el-table-column sortable propdate label日期/el-table-columnel-table-column propname label姓名/el-table-columnel-table-column propaddress label地址/el-table-columnel-table-column fixedright label操作 width100template #defaultscopeel-button clickhandleEdit(scope.row) typetext编辑/el-buttonel-button typetext删除/el-button/template/el-table-column/el-table/div
/template
script// is an alias to /src// import HelloWorld from /components/HelloWorld.vueexport default {name: HomeView,components: {// HelloWorld},data() {return {search: ,tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路1518 弄,},{date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路1517 弄,},{date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路1519 弄,}]}},methods: {handleEdit() {}}}
/script项目前后端分离情况
项目前后端分离情况如图 注意事项和细节
1、flex: 1 布局说明 https://www.cnblogs.com/LangZ-/p/12703858.html 2、box-sizing: border-box box-sizing: border-box 就是将border 和padding 数值包含在width 和height 之内这样的好处就是修改border 和padding 数值盒子的大小不变 https://blog.csdn.net/qq_26780317/article/details/80736514 3、引入Element-Plus , 启动可能出现的问题和解决方案
