好的,我会给你提供一个简单的示例代码来实现这个功能。
首先,我们需要安装相应的依赖,包括 Vue.js、Ant Design Vue 和 Ant Design Pro Vue:
复制
npm install vue ant-design-vue ant-design-pro-vue --save
然后,在 main.js 文件中引入所需的组件和样式:
复制
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { Layout, Menu, Breadcrumb, Pagination } from 'ant-design-vue'
import { PageHeaderWrapper } from 'ant-design-pro-vue'
import 'ant-design-vue/dist/antd.css'
import 'ant-design-pro-vue/dist/ant-design-pro-vue.css'
Vue.config.productionTip = false
Vue.use(Layout)
Vue.use(Menu)
Vue.use(Breadcrumb)
Vue.use(Pagination)
Vue.use(PageHeaderWrapper)
new Vue({
router,
render: h => h(App)
}).$mount('#app')
接下来,我们可以创建一个 layout.vue 组件,用于渲染整个页面的布局结构:
复制
<template>
<a-layout class="layout">
<a-layout-header class="header">
<div class="logo">企业官网</div>
<a-menu :mode="mode" :default-selected-keys="[$route.path]" class="menu">
<a-menu-item key="/">
<router-link to="/">首页</router-link>
</a-menu-item>
<a-menu-item key="/about">
<router-link to="/about">关于我们</router-link>
</a-menu-item>
<a-menu-item key="/news">
<router-link to="/news">新闻中心</router-link>
</a-menu-item>
<a-menu-item key="/products">
<router-link to="/products">产品中心</router-link>
</a-menu-item>
<a-menu-item key="/profile">
<router-link to="/profile">简介</router-link>
</a-menu-item>
</a-menu>
</a-layout-header>
<a-layout-content class="content">
<a-breadcrumb class="breadcrumb">
<a-breadcrumb-item>
<router-link :to="{ path: '/' }">首页</router-link>
</a-breadcrumb-item>
<a-breadcrumb-item>{
{ $route.meta.title }}</a-breadcrumb-item>
</a-breadcrumb>
<page-header-wrapper :title="$route.meta.title" />
<router-view />
</a-layout-content>
<a-layout-footer class="footer">
© 2022 企业官网
</a-layout-footer>
</a-layout>
</template>
<script>
export default {
name: 'Layout',
data () {
return {
mode: 'horizontal'
}
}
}
</script>
<style scoped>
.layout {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
}
.logo {
color: #fff;
font-weight: bold;
font-size: 24px;
}
.menu {
line-height: 64px;
}
.content {
flex: 1;
padding: 0 50px;
margin-top: 24px;
}
.breadcrumb {
margin-bottom: 24px;
}
.footer {
text-align: center;
padding: 24px;
background-color: #f5f5f5;
margin-top: 24px;
}
@media (max-width: 768px) {
.header {
flex-direction: column;
}
.logo {
margin-bottom: 16px;
}
.menu {
margin-bottom: 16px;
}
.content {
padding: 0 24px;
}
}
</style>
在 layout.vue 中,我们使用了 Ant Design Vue 中的 Layout、Menu、Breadcrumb 和 Pagination 组件,以及 Ant Design Pro Vue 中的 PageHeaderWrapper 组件,来实现整个页面的布局结构。
接下来,我们可以创建一个 news.vue 组件,用于渲染新闻列表页和新闻详情页:
复制
<template>
<div>
<div v-if="!$route.params.id">
<a-card :bordered="false" :loading="loading" class="card">
<a-list
:item-layout="'vertical'"
:size="'large'"
:dataSource="newsList"
:pagination="{ pageSize: pageSize, current: currentPage, total: total }"
@pagination-change="handlePageChange"
>
<template #item="{ item }">
<a-list-item :key="item.id">
<a-list-item-meta
:title="item.title"
:description="item.date"
/>
<div class="content">{
{ item.summary }}</div>
<a-button :href="item.link" target="_blank">查看详情</a-button>
</a-list-item>
</template>
</a-list>
</a-card>
</div>
<div v-else>
<a-card :bordered="false" :loading="loading" class="card">
<a-card-meta :title="news.title" :description="news.date" />
<div class="content">{
{ news.content }}</div>
</a-card>
</div>
</div>
</template>
<script>
export default {
name: 'News',
data () {
return {
loading: false,
newsList: [],
news: {},
currentPage: 1,
pageSize: 10,
total: 0
}
},
async created () {
this.loading = true
if (this.$route.params.id) {
this.news = await this.fetchNews(this.$route.params.id)
} else {
this.newsList = await this.fetchNewsList()
}
this.loading = false
},
methods: {
async fetchNewsList () {
// fetch news list from API
},
async fetchNews (id) {
// fetch news detail from API
},
handlePageChange (page) {
this.currentPage = page
this.newsList = this.fetchNewsList()
}
}
}
</script>
<style scoped>
.card {
margin-bottom: 24px;
}
.content {
margin-bottom: 16px;
}
</style>
在 news.vue 中,我们根据 $route.params.id 的值来判断当前是新闻列表页还是新闻详情页,然后分别渲染相应的内容。在新闻列表页中,我们使用了 Ant Design Vue 中的 Card 和 List 组件来展示新闻列表,并使用了 Pagination 组件来支持分页功能。在新闻详情页中,我们使用了 Card 和 CardMeta 组件来展示新闻内容。
最后,我们需要在 router.js 文件中配置路由,以便在 layout.vue 中正确渲染页面的标题和内容:
复制
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/layout.vue'
import News from '@/news.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
component: Layout,
children: [
{
path: '/',
name: 'Home',
component: () => import('@/home.vue'),
meta: { title: '首页' }
},
{
path: '/about',
name: 'About',
component: () => import('@/about.vue'),
meta: { title: '关于我们' }
},
{
path: '/news',
name: 'News',
component: News,
meta: { title: '新闻中心' }
},
{
path: '/news/:id',
name: 'NewsDetail',
component: News,
meta: { title: '新闻详情' }
},
{
path: '/products',
name: 'Products',
component: () => import('@/products.vue'),
meta: { title: '产品中心' }
},
{
path: '/profile',
name: 'Profile',
component: () => import('@/profile.vue'),
meta: { title: '简介' }
}
]
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
在 router.js 中,我们配置了路由,包括首页、关于我们、新闻中心、产品中心、简介和新闻详情页等路由,同时在每个路由的 meta 中设置了相应页面的标题,以便在 layout.vue 中渲染正确的标题。
以上就是一个简单的企业官网的示例,希望能够帮助你实现相应的功能。
ant pro 企业官网 简单页面开发
猜你喜欢
转载自blog.csdn.net/vcit102/article/details/130418855
今日推荐
周排行