VUE学习笔记(二)-搭建布局页和分类页面

本小节为搭建布局页和分类页面

需要使用到element-plus，添加指令

npm install element-plus --save

布局页从elementplus官网找到布局，粘贴过来

<template>
<el-container class="layout-container-demo">
<el-aside width="200px">
<el-scrollbar>
<div class="mb-2 logo">Vue+WEBAPI</div>
<el-menu :default-openeds="['1', '2']" active-text-color="#ffd04b" background-color="#303133" text-color="#fff"
router="true">
<el-sub-menu index="1">
<template #title>
<el-icon>
<message />
</el-icon>店铺管理
</template>
<el-menu-item-group>

<el-menu-item index="/"><el-icon>
<HomeFilled />
</el-icon>首页</el-menu-item>

<el-menu-item index="/category"><el-icon>
<Operation />
</el-icon>分页管理</el-menu-item>
<el-menu-item index="1-3"><el-icon>
<ShoppingCart />
</el-icon>商品管理</el-menu-item>
</el-menu-item-group>

</el-sub-menu>
<el-sub-menu index="2">
<template #title>
<el-icon>
<Setting />
</el-icon>系统设置
</template>
<el-menu-item-group>
<el-menu-item index="2-1"><el-icon>
<Edit />
</el-icon>修改密码</el-menu-item>
</el-menu-item-group>

</el-sub-menu>

</el-menu>
</el-scrollbar>
</el-aside>

<el-container>
<el-header style="text-align: right; font-size: 12px">
<div class="toolbar">
<el-dropdown>
<el-icon style="margin-right: 8px; margin-top: 1px">
<setting />
</el-icon>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item>Delete</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<span>Tom</span>
</div>
</el-header>

<el-main>
<router-view></router-view>
</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</template>

<script setup>

</script>

<style scoped>
.logo {
height: 50px;
color: white;
text-align: center;
line-height: 50px;
font-weight: bold;
}

.layout-container-demo {
height: 100vh;
}

.el-header {
position: relative;
background-color: white;
color: var(--el-text-color-primary);
box-shadow: var(--el-box-shadow-light);

}


.layout-container-demo .el-aside {
color: var(--el-text-color-primary);
background: black;
}

.layout-container-demo .el-menu {
border-right: none;
}

.layout-container-demo .el-main {
padding: 0;
box-shadow: var(--el-box-shadow-light);
margin: 10px 0px;
}

.layout-container-demo .toolbar {
display: inline-flex;
align-items: center;
justify-content: center;
height: 100%;
right: 20px;
}

.el-footer {
box-shadow: var(--el-box-shadow-light);
}
</style>
<!-- 全局样式 -->
<style>
.card-header {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
}

.text {
font-size: 14px;
}

.item {
margin-bottom: 18px;
}

.box-card {
width: 100wh;
height: 100vh;
}
</style>

 

src下的main.js添加elementplus和icon的注册

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 * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app=createApp(App)
//icon注册
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
app.use(ElementPlus).use(store).use(router).mount("#app");

src的router文件夹下添加路由category

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path:'/category',
    name:'category',
    component: () => import(/* webpackChunkName: "about" */ '../views/CategoryView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

 

src的views下新建文件CategoryView.vue

<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>商品分类</span>
                <el-button type="primary" icon="CirclePlus" round>添加分类</el-button>
            </div>
        </template>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="id" label="Id" width="180" />
            <el-table-column prop="name" label="名称" width="180" />
            <el-table-column fixed="right" label="操作" width="180">
                <template #default>
                    <el-button  type="success" size="small" >
                        修改
                    </el-button>
                    <el-button  type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

    </el-card>
</template>

<script setup>
const 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>