熹微~~~ 基于 Vue 开发的昏暗风格的响应式网页！

1、项目简介

熹微（dim-star），名字来源于晋代田园派诗人陶渊明的《归去来兮辞》：

问征夫以前路，恨晨光之熹微，

因为整个界面的风格是较为暗淡的，页面中的组件又总是给人微亮的感受，所以以熹微来命名。

熹微是基于 vue 框架开发的只包含前端页面的响应式网页，整个页面的响应式布局可以很好的展示组件随着页面的尺寸的变化而变化。

2、项目环境搭建

1. 项目创建

2. 创建项目 dim-star

3. 选择 Vue 的版本

4. Default ([Vue 3] babel, eslint)

5. 添加项目所需依赖

6. 添加 router

7. 添加 scss 需要的依赖

8. 添加 video 需要的依赖

3、项目界面搭建

3.1、网页基础配置

3.1.1、页面全局配置

在 public/index.html 文件中写入如下内容

<style>    *{        padding: 0;        margin: 0;        outline: none;        box-sizing: border-box;    }</style>

3.1.2、项目初始化

删除创建项目时自带的组件等信息，具体内容如下

• views/AboutView.vue

• views/HomeView.vue

• components/HelloWorld.vue

• 清除 router/index.js 中无效的路由信息

• 清除 views/App.vue 中的无效内容

3.2、配置 App.vue

在 App.vue 文件中的 template 标签中写入如下内容

<div class="home-page">    <div class="container">        <!--左侧滑动条组件-->        <side-bar-component></side-bar-component>        <div class="wrapper">            <!--头部组件-->            <header-component></header-component>            <div class="main-container">                        </div>        </div>    </div></div>

注：因为篇幅问题项目中的 scss 代码未罗列在页面

3.3、页面整体架构

3.3.1、创建左侧导航栏组件

文件创建位置 components/SideBarComponent.vue

3.3.2、创建头部导航栏组件

文件创建位置 components/HeaderComponent.vue

3.3.3、创建主页面

• views/DiscoverView.vue 页面

• views/TendingView.vue 页面

注：本项目仅添加上面创建的两个主页面

3.3.4、配置路由信息

① 配置路由渲染页面

配置文件 App.vue，在 main-container 容器中添加 router-view，如下

<div class="main-container">    <router-view></router-view></div>

② 配置路由入口

配置文件 SideBarComponent.vue，在 menu 容器中未每一项菜单配置 router-link，示例如下

<router-link to="/discover" active-class="active">    <svg></svg>    发现</router-link>

③ 在文件 router/index.js 中添加如下内容

const routes = [  {    path: '/',    name: 'home',    redirect: '/discover',    children:[      {        path: 'discover',        name: 'discover',        component: DiscoverView,      },
      {        path: 'tending',        name: 'tending',        component: TendingView      },
    ]  },]

3.4、界面预览及布局

4、页面开发

4.1、[发现]页面

DiscoverView 页面由上下两部分构成，可以拆分为如下三个部分

• header 头部

• BlogComponent 组件

• VideoComponent 组件

在 components 文件夹下创建 discover 文件夹并创建上述两个组件

DiscoverView.vue 文件中的代码如下

<template>    <div class="header anim" style="--delay: 0s">发现</div>        <blog-component></blog-component>        <video-component></video-component></template>

4.1.1、BlogComponent 组件

① 简介

BlogComponent 组件分由一两个卡片样式构成，如下所示

• blogs

• blog

• blog

② 代码

略……

③ 界面预览

4.1.2、VideoComponent 组件

① 简介

VideoComponent 组件由上下两部分构成，上部为小标签，下部为循环生成的 videos 列表，列表中的子 video 使用栅格布局，用户可以根据实际的需求来选择生成 video 的个数

② 代码

略

③ 界面预览

4.1.3、[发现]界面预览

4.2、[热门]页面

TendingView 页面由左侧流和右侧流两部分构成。其中，左侧流结构由两部分构成，右侧流结构也由两部分构成

• 左侧

• VideoComponent 组件

• VideoDetailComonent 组件

• 右侧

• ChatComponet 组件

• ChatVipComponent 组件

在 components 文件夹下创建 tending 文件夹并创建上述的四个组件

TendingView.vue 文件中的代码如下

<template>    <div class="stream-area">        <!--左侧流-->        <div class="video-stream">            <video-component></video-component>            <video-detail-component></video-detail-component>        </div>                <!--右侧流-->        <div class="chat-stream">            <chat-component></chat-component>            <chat-vip-component></chat-vip-component>        </div>    </div></template>

4.2.1、VideoComponent 组件

① 简介

VideoComponent 组件为自定义的视频播放组件

文件 assets/css/player.scss 为我们自定义的视频播放器样式

使用自定义的视频组件，我们可以选择局部或全局导入，此处我们选择全局导入，在 main.js 中引入自定义视频组件的样式

②代码

在 main.js 中导入自定义视频播放器组件

require("video.js/dist/video-js.css")require("vue-video-player/")import "videojs-flash"require("./assets/css/player.scss")

③ 自定义播放器预览

4.2.2、VideoDetailComponent 组件

① 简介

VideoDetailComponnent 组件为视频详情组件，用于展示视频的详细信息，主要包含作者的信息和视频描述等内容

② 代码

略

③ 界面预览

4.2.3、ChatComponent 组件

① 简介

ChatComponent 组件由头部功能提示块、底部的输入框和中间的一个循环生成的消息列表构成，主要展示用户当前的状态和消息

② 代码

略

③ 页面预览

4.2.4、ChatVipComponent 组件

① 简介

ChatVipComponent 组件的构成和 ChatComponent 组件的构成相似，同样是由三部分构成，不同的是中间为话题板块，底部为查看全部按钮

② 代码

略

③ 页面预览

4.2.5、[热门]界面预览

5、源码获取

① GitHub

https://github.com/OHUHO/dim-star.git

关注微信公众号【京茶吉鹿】了解最新动态