ant pro enterprise official website simple page development

好的，我会给你提供一个简单的示例代码来实现这个功能。

首先，我们需要安装相应的依赖，包括 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 中渲染正确的标题。

以上就是一个简单的企业官网的示例，希望能够帮助你实现相应的功能。