SSM-使用vue3+elementPlus搭建基础界面

配置Vue服务端口

在vue.config.js文件添加如下内容：

module.exports = {
  devServer:{
    port:10000 // 启动端口
  }
}

---

构建Header

1. 修改App.vue
   • 清空<style>、标签里面的所有的内容，仅保留标签
2. 修改HomeView
3. 删除HelloWorld.vue。
4. 创建自己的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>

flex: 1布局说明
5. 在App.vue进行引用

<template>
  <div>
    <Header/>
    Home页面
  </div>
</template>

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

6. 创建全局global.css。全局样式写在这里。
   位置：assets,用于存放资源文件。assets/css/global.css
   关于布局的盒模型说明

7. main.js用于引入资源(css/组件等)，同时也是创建App挂载#app,引入./router ./store等资源的所在

• 引入css

import '@/assets/css/global.css'

8. main.js导入ElementPlus

• 引入ElementPlus

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

9. App.vue引入一个el-button，测试是否生效
   选择一个基础组件

<el-button>Default</el-button>

• 报错。是因为还没有安装element-plus，安装即可。

 error  in ./src/main.js
Module not found: Error: Can't resolve 'element-plus'

• 解决方法：Install ‘element-plus’
  

---

10. 引入下拉框。放到Header.vue里面
    Dropdown下拉菜单

<el-dropdown>
    <span class="el-dropdown-link">
      Dropdown List
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>Action 1</el-dropdown-item>
        <el-dropdown-item>Action 2</el-dropdown-item>
        <el-dropdown-item>Action 3</el-dropdown-item>
        <el-dropdown-item disabled>Action 4</el-dropdown-item>
        <el-dropdown-item divided>Action 5</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

---

构建侧边栏

• 11.创建Aside.vue。
  • 侧栏

<el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Navigator One</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>

12. 布局：App.vue将页面分成三个部分，头部Header，主体（又分为侧边栏，内容区域（表格））

<template>
  <div>
    <Header/>
    
    <!--主体-->
    <!--侧边栏-->
    <div style="display: flex">
      <Aside/>
      <!--内容区域：是从HomeView.vue组件来的-->
      <router-view style="flex:1"/>
    </div>
  </div>
</template>

导入Aside

import Aside from "@/components/Aside";
export default{
components:{
      Aside
      }
 }

13. HomeView.vue添加一个el-button进行测试

<div>
    <el-button type="primary">我的按钮</el-button>
  </div>

14. 主页面，三段式结构已完成

---

15. 完善主页面，导航栏宽度
    style=“width:200px”
16. 内容区域HomeView.vue，引入表格，数据将来由后端提供
    选择表格样式

  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>

填充案例Data，测试效果

export default {
  name: 'HomeView',
  components: {

  },
  data(){
    return {
      tableData:[
       {
          date:'2021-05-02',
          name:'王小虎',
          address:'上海市普陀区金沙江路1518弄',
      },
      {
          date:'2021-05-04',
          name:'王小虎',
          address:'上海市普陀区金沙江路1517弄',
      },
      {
          date:'2021-05-01',
          name:'王小虎',
          address:'上海市普陀区金沙江路1519弄',
      },
      ]
    }
  }
}

17. main.js配置国际化

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
//重复的地方，合并到一个里面
app.use(ElementPlus, {
  locale: zhCn,
})

18. 测试数据，排序日期。在需要排序的列，加入属性sortable即可。会发现标签旁边多了个上下箭头，点击即可排序。

<el-table-column sortable prop="date" label="日期" />

19. 增加"新增"、“其他”按钮和"搜索框"。HomeView.vue

 <div>
      <el-button type="primary">新增</el-button>
      <el-button>其他</el-button>
</div>

搜索框

    <div style="margin:10px 5px">
      <el-input v-model="search" style="width:30%" placeholder="请输入关键字" />
      <el-button style="margin-left:10px" type="primary">搜索</el-button>
    </div>

20. 表格增加“编辑”和“删除”固定列
    添加到HomeView.vue列属性的最后一列

      <el-table-column fixed="right" label="操作" width="120">
        <template #default>
          <el-button type="text" >编辑</el-button>
          <el-button type="text" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

21. 数据池中添加"search",避免v-model报错

data(){
    return {
      search:' ',
      }
 }