03 - Vue3 UI Framework - 首页

顶部边栏做完了，接下来开始做官网的首页

返回阅读列表点击

创建视图文件夹

让我们先新建一个 src/views 文件夹，用来存放官网的主要视图

然后在该文件夹下新建两个 vue 文件，作为我们的视图

• Home.vue，首页
• Document.vue，文档页

再配置一下 router.ts 来实现跳转

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

const history = createWebHistory()
const router = createRouter({
  history,
  routes: [
    { path: '/', component: Home },
    { path: '/document', component: Document },
  ]
})
export default router

骨架

先搭建一下首页的骨架

已知首页要显示

1. 顶边栏
2. 极光背景
   • 两个跳转链接
3. 三点特性

首先是极光背景，非常简单，用渐变色 + 转向当作背景色就可以了，然后三点特性，显然是无序列表，那么可以得到如下骨架：

基本功能

然后在 script 中引入顶边栏

import Topnav from "../components/Topnav.vue";
export default {
  components: {
    Topnav,
  },
};

最后制作一下极光的样式表

改进首页

那显然，特性应该单独占据一行，并且在宽度足够的时候横向排列，两个链接也最好横向排列，而且最好各自有点介绍。

先修改模板，再补全样式，再加个 SVG 图，home.vue 代码如下：

运行效果

项目地址 ??

GitHub: https://github.com/JeremyWu917/jeremy-ui

官网地址 ??

JeremyUI: https://ui.jeremywu.top

感谢阅读 ?