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
骨架
先搭建一下首页的骨架
已知首页要显示
- 顶边栏
- 极光背景
- 两个跳转链接
- 三点特性
首先是极光背景,非常简单,用渐变色 + 转向当作背景色就可以了,然后三点特性,显然是无序列表,那么可以得到如下骨架:
<template>
<div>
<Topnav />
<div class="banner">
<a href="https://github.com/JeremyWu917/jeremy-ui"> Github </a>
<router-link to="/document"> 文档页 </router-link>
</div>
<div class="features">
<ul>
<li>特性1</li>
<li>特性2</li>
<li>特性3</li>
</ul>
</div>
</div>
</template>
基本功能
然后在 script 中引入顶边栏
import Topnav from "../components/Topnav.vue";
export default {
components: {
Topnav,
},
};
最后制作一下极光的样式表
<style lang="scss" scoped>
$theme-color: #8c6fef;
$border-radius: 4px;
$color: white;
.banner {
background: linear-gradient(
145deg,
rgb(232, 232, 235) 0%,
rgb(193, 181, 235) 30%,
rgb(136, 106, 235) 70%,
rgb(108, 68, 240) 100%
);
clip-path: ellipse(80% 60% at 50% 40%);
}
.features {
margin: 64px auto;
padding: 0 16px;
@media (min-width: 800px) {
width: 800px;
> ul {
> li {
width: 50%;
}
}
}
@media (min-width: 1200px) {
width: 1200px;
> ul {
> li {
width: 33.3333%;
}
}
}
@media (max-width: 800px) {
> ul {
flex-direction: column;
align-items: center;
}
}
> ul {
display: flex;
flex-wrap: wrap;
> li {
margin: 16px 0;
display: grid;
justify-content: center;
align-content: space-between;
grid-template-areas:
"icon title"
"icon text";
grid-template-columns: 80px auto;
grid-template-rows: 1fr auto;
> svg {
grid-area: icon;
width: 64px;
height: 64px;
}
> h3 {
grid-area: title;
font-size: 28px;
}
> p {
grid-area: text;
}
}
}
}
.banner {
color: $color;
padding-top: 120px;
padding-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
> * {
margin: 12px 0;
}
> .actions {
padding: 8px 0;
a {
margin: 0 8px;
display: inline-block;
padding: 8px 24px;
&:hover {
text-decoration: none;
}
> img {
display: block;
width: 80px;
}
text-align: center;
}
}
}
</style>
改进首页
那显然,特性应该单独占据一行,并且在宽度足够的时候横向排列,两个链接也最好横向排列,而且最好各自有点介绍。
先修改模板,再补全样式,再加个 SVG
图,home.vue
代码如下:
<template>
<div>
<Topnav />
<div class="banner">
<h1>Jeremy UI</h1>
<h2>JeremyWU 创建的 UI 组件库</h2>
<p class="actions">
<a href="https://github.com/JeremyWu917/jeremy-ui">
<img
src="../assets/github.png"
alt="Github"
style="transform: rotateY(180deg)"
/>
Github
</a>
<router-link to="/document">
<img src="../assets/goto.png" alt="开始" />
开始
</router-link>
</p>
</div>
<div class="features">
<ul>
<li>
<svg>
<use xlink:href="#icon-Vue"></use>
</svg>
<h3>基于 Vue 3</h3>
<p>使用了 Vue 3 全新特性</p>
</li>
<li>
<svg>
<use xlink:href="#icon-typescript"></use>
</svg>
<h3>基于 TypeScript</h3>
<p>源代码采用 TypeScript 书写</p>
</li>
<li>
<svg>
<use xlink:href="#icon-fork"></use>
</svg>
<h3>具有亲和力的代码</h3>
<p>新手也能轻松阅读的源代码</p>
</li>
</ul>
</div>
</div>
</template>
<script lang="ts">
import Topnav from "../components/Topnav.vue";
export default {
components: {
Topnav,
},
};
</script>
<style lang="scss" scoped>
$theme-color: #8c6fef;
$border-radius: 4px;
$color: white;
.banner {
background: linear-gradient(
145deg,
rgb(232, 232, 235) 0%,
rgb(193, 181, 235) 30%,
rgb(136, 106, 235) 70%,
rgb(108, 68, 240) 100%
);
clip-path: ellipse(80% 60% at 50% 40%);
}
.features {
margin: 64px auto;
padding: 0 16px;
@media (min-width: 800px) {
width: 800px;
> ul {
> li {
width: 50%;
}
}
}
@media (min-width: 1200px) {
width: 1200px;
> ul {
> li {
width: 33.3333%;
}
}
}
@media (max-width: 800px) {
> ul {
flex-direction: column;
align-items: center;
}
}
> ul {
display: flex;
flex-wrap: wrap;
> li {
margin: 16px 0;
display: grid;
justify-content: center;
align-content: space-between;
grid-template-areas:
"icon title"
"icon text";
grid-template-columns: 80px auto;
grid-template-rows: 1fr auto;
> svg {
grid-area: icon;
width: 64px;
height: 64px;
}
> h3 {
grid-area: title;
font-size: 28px;
}
> p {
grid-area: text;
}
}
}
}
.banner {
color: $color;
padding-top: 120px;
padding-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
> * {
margin: 12px 0;
}
> .actions {
padding: 8px 0;
a {
margin: 0 8px;
display: inline-block;
padding: 8px 24px;
&:hover {
text-decoration: none;
}
> img {
display: block;
width: 80px;
}
text-align: center;
}
}
}
</style>
运行效果
感谢阅读
03 - Vue3 UI Framework - 首页的更多相关文章
- 00 - Vue3 UI Framework - 阅读辅助列表
阅读列表 01 - Vue3 UI Framework - 开始 02 - Vue3 UI Framework - 顶部边栏 03 - Vue3 UI Framework - 首页 04 - Vue3 ...
- 01 - Vue3 UI Framework - 开始
写在前面 一年多没写过博客了,工作.生活逐渐磨平了棱角. 写代码容易,写博客难,坚持写高水平的技术博客更难. 技术控决定慢慢拾起这份坚持,用作技术学习的阶段性总结. 返回阅读列表点击 这里 开始 大前 ...
- 05 - Vue3 UI Framework - Button 组件
官网基本做好了,接下来开始做核心组件 返回阅读列表点击 这里 目录准备 在项目 src 目录下创建 lib 文件夹,用来存放所有的核心组件吧.然后再在 lib 文件夹下创建 Button.vue 文件 ...
- 02 - Vue3 UI Framework - 顶部边栏
顶部边栏比较简单,而且首页和文档页都需要,所以我们先从顶部边栏做起 前文回顾点击 这里 返回阅读列表点击 这里 初始化 首先,在 components 文件夹下,创建一个 vue 组件,命名为 Top ...
- 04 - Vue3 UI Framework - 文档页
官网的首页做完了,接下来开始做官网的文档页 返回阅读列表点击 这里 路由设计 先想想我们需要文档页通向哪些地方,这里直接给出我的设计: 所属 子标题 跳转路径 文件名(*.vue) 指南 介绍 /do ...
- 06 - Vue3 UI Framework - Dialog 组件
做完按钮之后,我们应该了解了遮罩层的概念,接下来我们来做 Dialog 组件! 返回阅读列表点击 这里 需求分析 默认是不可见的,在用户触发某个动作后变为可见 自带白板卡片,分为上中下三个区域,分别放 ...
- 08 - Vue3 UI Framework - Input 组件
接下来再做一个常用的组件 - input 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 input 组件有两种类型,即 input 和 textarea 类型 当类型为 ...
- 09 - Vue3 UI Framework - Table 组件
接下来做个自定义的表格组件,即 table 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 基于原生 table 标签的强语义 允许用户自定义表头.表体 可选是否具有边框 ...
- 10 - Vue3 UI Framework - Tabs 组件
标签页是非常常用的组件,接下来我们来制作一个简单的 Tabs 组件 返回阅读列表点击 这里 需求分析 我们先做一个简单的需求分析 可以选择标签页排列的方向 选中的标签页应当有下划线高亮显示 切换选中时 ...
随机推荐
- Java学习(十四)
玩云顶连跪一晚上,搞得心态有点崩了... 源计划5-4还是一星vn,吐了. 今天学习了伪元素: 语法是 :first-letter//元素的第一个字母的位置,如果:前不加元素,默认是#(即所有元素) ...
- ubuntu更換清華軟件源
打开软件源的编辑sudo gedit /etc/apt/sources.list 软件源: Ubuntu--更改国内镜像源(阿里.网易.清华.中科大) 打開軟件源文件進行修改: 使用 sudo vim ...
- [loj3524]钥匙
由于到达关系具有传递性,可以考虑不断将若干个可以相互到达的点缩点,并且当两个点只能单向到达时,能到达另一个点的点一定不是最小值 由此,我们来考虑dfs,即不断从一个节点开始,遍历其可以到达的点,当发现 ...
- [luogu5577]算力训练
(以下以$B$为进制,$m$为幂次,$n=B^{m}$) 定义$\oplus$为$k$进制下不进位加法,$\otimes$为$\oplus$卷积 令$f_{i,j}$表示前$i$个数的$\oplus$ ...
- ES6学习 第二章 变量的解构赋值
前言 该篇笔记是第二篇 变量的解构赋值. 这一章原文链接: 变量的解构赋值 解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构 ...
- jpa生成uuid
使用jpa可以生成uuid,但是我直接添加数据没有id值会报错,只在程序中有效,如果直接修改数据库需要手动填写,另外长度不要乱填 ,之前填了200,找了半天才找到原因. package com.jav ...
- C#.NET 操作Windows服务承载WCF
Windows服务的制作.安装可以参考这篇: C#.NET 操作Windows服务(安装.卸载) - runliuv - 博客园 (cnblogs.com) 本篇会在这个解决方案基础上,继续修改. 一 ...
- 【宏组学】如何根据taxid(或taxname)快速获得taxname(或taxid)?
需求 我有一个物种taxonomy ID的list,想获得相应的物种名,不要一个个去NCBI Taxonomy官网查.反之根据物种名list查询对应的taxid. 实现 因为之前没怎么用过,我的第一个 ...
- IO流的字节输入输出流(InputStream,OutputStream)
字节输出流与文件字节输出流 文件存储原理和记事本打开文件原理 OutputStream及FileOutputStream import java.io.FileOutputStream; import ...
- 一次线上GC故障解决过程记录
排查了三四个小时,终于解决了这个GC问题,记录解决过程于此,希望对大家有所帮助.本文假定读者已具备基本的GC常识和JVM调优知识,关于JVM调优工具使用可以查看我在同一分类下的另一篇文章: http: ...