要使用 Vue 和 Ant Design Vue（antdv）创建一个好看的展示当前时间的网页，需要首先安装 Vue 和 Ant Design Vue。以下是一个完整的示例，包括了如何使用 Vue 结合 Ant Design Vue 来创建一个动态更新时间的网页。

项目结构
  1. index.html - 入口 HTML 文件。
  2. main.js - Vue 入口文件。
  3. App.vue - Vue 组件。
  4. styles.css - 自定义样式（如果需要的话）。
1. 创建项目

首先，通过 Vue CLI 创建一个新的 Vue 项目：

vue create time-display
cd time-display
  • 1.
  • 2.

然后，安装 Ant Design Vue：

npm install ant-design-vue
  • 1.
2. 配置 main.js

在 src/main.js 中引入 Ant Design Vue，并全局注册其组件和样式：

import Vue from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

Vue.config.productionTip = false;

Vue.use(Antd);

new Vue({
  render: h => h(App),
}).$mount('#app');
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
3. 创建 App.vue

在 src/App.vue 中编写 Vue 组件代码，包括时间显示和样式：

<template>
  <a-layout class="layout">
    <a-layout-content>
      <div class="container">
        <a-card title="当前时间" class="time-card">
          <h1>{{ time }}</h1>
        </a-card>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
export default {
  data() {
    return {
      time: '',
    };
  },
  methods: {
    updateTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      this.time = `${hours}:${minutes}:${seconds}`;
    },
  },
  mounted() {
    this.updateTime();
    setInterval(this.updateTime, 1000);
  },
};
</script>

<style scoped>
.layout {
  min-height: 100vh;
  background: #f0f2f5;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.time-card {
  width: 300px;
  text-align: center;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 3rem;
  margin: 0;
  color: #333;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
4. 运行项目

确保在项目根目录下，然后运行以下命令启动开发服务器：

npm run serve
  • 1.
说明
  1. main.js: 配置 Vue 和 Ant Design Vue，使得 Ant Design Vue 的组件可以在应用中使用。
  2. App.vue: Vue 组件中使用了 Ant Design Vue 的 a-layout 和 a-card 组件来展示时间。使用了 setInterval 来每秒更新一次时间。
  3. styles: 自定义了样式，使得时间卡片居中显示，并添加了一些简单的样式（如阴影和圆角）。

可以根据需要进一步调整样式，添加更多的功能或者配置。这个示例为基础的时间展示提供了一个干净且现代的界面。