Vue3.0 + Antd Vue 3.2 制作一个仿起点中文小说网站展示页

                                                                      行路有良友，做事无悔心。

1.技术栈——Vue3.0及Antd Vue 3.2介绍及其特点

1.1 Vue3.0

        Vue3.0是当前Vue的最新版本，拥有丰富组件功能的同时还兼顾了渲染效率，是市面上最为流行的前端开发框架之一，可以快速初始化前段项目包架构，上手简单，安装要求nodejs版本大于16。

1.2 Antd Vue 3.2的主要特点和组件库

        antd vue是由蚂蚁集团开发的一款前端组件库，通过引入安装挂载到项目后，便可以使用其丰富的组件库，引入其定制好的常用组件，比如list，table,走马灯，模态框等等，也可以通过官方文档中给出的api接口更深层次地完成组件样式和功能的定制。

1.3仿照起点中文小说网站简介及展示页设计

        页面配色，设计框架主要参考起点小说，阅文的小说的展示页，对页面做了精简，数据为前端数据，仅做展示用，界面效果如下：

2.项目搭建

2.1初始化项目配置

       安装vue3.0需要的node.js环境，在cmd控制台中输入node，出现版本号表示安装成功。
       vue初始化项目 vscode使用ctrl+shift+y调出控制台，使用vue官方的文档命令创建项目。
       安装antd vue，参考antd官方文档，使用npm 或者yarn安装（注：antd的图片库需要另外安装，并且想要全局使用需要自己写一个方法将图片组件全部注册）

2.2页面架构和布局

       使用f12查看起点小说网，阅文小说网时，我发现对于电脑端，板块的设计都是主内容居中，两边留白，主版块的宽度也为定长，通常为1000px-1200px不等，高度也是算好的定高，可能是为了防止出现百分比页面变形，板块挤压等情况。根据上面的展示图，我将页面的布局分为如下部分：

非常明显的五行三列的布局法，我们进行页面制作时，可以将页面看作是一个纵横交错的网格，其中，大的网格里面放着小的网格，小的网格里面套着更小的网格，我们可以按照容器从大到小，一直使用行和列来细分到不需要再次拆分，页面布局就这样确定了，在这里，除了笔者较多的使用了antd的栅格布局。
       经过行列布局后，剩下的便是填充元素和样式，在行列块里放置合适的组件，比如用的较多的list列表，但是antd自带的样式往往不能满足我们的设计需求，我们可以通过组件提供的slot插槽自定义，或者写优先级高的行内样式，再或者更进一步的使用::v-deep 样式名称来深度重写，但是注意，深度重写后整个 .vue文件会受到影响，所以要重写样式的尽量分出去。

项目获取和运行

       项目放在github上，目前为私有库，周六周日有空就更新项目，更新完了就开放。
       拉取项目后运行 npm install 安装依赖，然后 npm run dev即可。

3.总结

       两天时间制作的简单界面，感兴趣的可以动手尝试，希望我的文章能给你一些帮助，有疑问也可以私信我！