苏州20号要封城是真的吗_网站建立不安全怎么取消_游戏推广文案_爱站网站排行榜

编写简单页面，可以直接使用现成的组件库，避免重复造轮子。
和vue3搭配，这边引入的是element-plus，其主页链接为: ElementUI
引入elemetui

npm install element-plus --save

安装依赖后，为了方便我们可直接全局引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

或者按需引入，可参考：快速开始
这里我们也可以按照推荐做点全局配置

app.use(ElementPlus, { size: 'small', zIndex: 3000 })

我们创建完的Vue3工程默认是把页面一分为二的，这边想写个页面平铺整个页面，所以我们把这个样式去掉，这里主要是main.css在生效。

将最大长度的限制也去掉

可以看到页面如图所示

然后我们编写一个自己的页面。这边我们参考一般的后台系统，一个大页面下，有多个子页面。我们去ElementUI中直接找到相应的框架组件 https://element-plus.org/zh-CN/component/container.html。这个有容器框架，也有导航页，就先用这个模版。

我们使用这个作为模版开始编写，将html、css、js部分的代码都拷贝下来，这里我新建了一个页面，简单做了下修改

代码如下(基本是复制过来的，稍微做了点修改)：

<script setup lang="ts">
import { Menu } from '@element-plus/icons-vue';
</script><template><el-container class="layout-container-demo" style="display: flex;height: 100vh;width: 100vw;"><el-header size="large" style="display: flex;justify-content: center;align-items: center;" >测试平台</el-header><el-container><el-aside width="20%"><el-scrollbar><el-menu :default-openeds="['1']" :router=true :default-active="$route.path"><el-menu-item index="mock"><el-icon><Menu /></el-icon><el-text class="level-1-name" size="large">测试桩</el-text></el-menu-item><el-sub-menu index="1"><template #title><el-icon><Menu /></el-icon><el-text class="level-1-name" size="large">一级标题1</el-text></template><el-menu-item index="about"><el-text class="level-2-name" size="large">about</el-text></el-menu-item><el-menu-item index="mock"><el-text class="level-2-name" size="large">二级标题1</el-text></el-menu-item></el-sub-menu><el-sub-menu index="2"><template #title><el-icon><setting /></el-icon>一级标题2 </template><el-menu-item-group><template #title>二级标题2</template><el-menu-item index="3-1">三级标题1</el-menu-item><el-menu-item index="3-2">三级标题2</el-menu-item></el-menu-item-group><el-menu-item-group title="二级标题3"><el-menu-item index="3-3">三级标题3</el-menu-item></el-menu-item-group><el-sub-menu index="3-4"><template #title>Option 4</template><el-menu-item index="3-4-1">Option 4-1</el-menu-item></el-sub-menu></el-sub-menu></el-menu></el-scrollbar></el-aside><el-main><router-view></router-view></el-main></el-container></el-container>
</template><style scoped>
.layout-container-demo .el-header {position: relative;background-color: var(--el-color-primary-light-7);color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {color: var(--el-text-color-primary);background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {border-right: none;
}
.layout-container-demo .el-main {padding: 0;
}
.layout-container-demo .toolbar {display: inline-flex;align-items: center;justify-content: center;height: 100%;right: 20px;
}.level-1-name {
font-size: 22px;
font-weight: 500;
line-height: 22px;
letter-spacing: .02em;
}.level-2-name {
font-size: 20px;
font-weight: 500;
line-height: 20px;
letter-spacing: .02em;
}
</style>

其展示效果如图：

然后大页面下还要包含其它的子页面，这里需要配置下路由：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import MainView from '../views/MainView.vue'
import MockPage from '../components/MockPage.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'home',component: HomeView,},{path: '/main',name: 'main',component: MainView,redirect:'/about',children:[{path: '/about',name: 'about',component: () => import('../views/AboutView.vue'),},{path: '/mock',name: 'mock',component: MockPage,}]},],
})export default router

最后我们再编写一个简单的子页面，即上方展示的表格，去elementUI处找一个合适的拷贝下：https://element-plus.org/zh-CN/component/table.html

把这个放到我们的子页面中，一个简单的页面就做好了

另外，这个页面还引用了一些图标：https://element-plus.org/zh-CN/component/icon.html
图标的组件是需要安装并且注册的。
安装

npm install @element-plus/icons-vue

配置

// main.ts// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}

然后就可以正常使用下方的图标了

https://element-plus.org/zh-CN/component/icon.html#icon-collection

当然这个页面还很粗糙，也没有真正的后台数据，后面我们写一下简单的后台系统，让数据从后台返回，并且把页面优化并丰富下。