基于vue的水墨新闻项目（移动端）

水墨新闻项目

项目技术：HTML、CSS、JavaScript、vant、Day.js、Vue全家桶
项目描述：基于移动端的新闻类app，项目使用vue进行开发。实现了新闻的获取，新闻的按频道分类，编辑频道、查看新闻详情与收藏、账号的登录、注册等功能。

部分页面展示

首页：

详情页：

频道编辑页

热搜页

收藏页左滑会显示详情和取消收藏

功能介绍：

首页：

搜索吸顶，轮播图，分类的table切换新闻布局可以管理分类(添加和删除) 记住列表滚动位置（使用vh）让每一个标签列表产生自己的滚动容器上拉刷新，触底加载

使用到的组件：

search 顶部的搜索框

van-cell 单元格文章封面的布局（左右结构）

van-list ：list列表用于新闻内容的展示

新闻详情页：

点赞，收藏，分享，关注图片预览功能记录滚动条位置

发现页面

热搜榜，更多热搜，新闻

个人中心页面

搜索页

搜索框历史记录高亮显示跳转到详情页

注意事项

vue中使用v-html加载的富文本，设置的css样式不生效

可以使用/deep/ 或者是 >>> 但是使用>>>时必须设置为css，不能使用less

/*在vue中，通过/deep/ 或者是>>> 来修改或处理富文本中的css样式*/

/*在vue中，通过/deep/ 或者是>>> 来修改富文本中的css样式*/
/deep/video{width: 311px;height: auto;
}

格式化时间的过滤器

filters:{timeFormat(time,format){// 通过new Date（时间戳） 可以将时间戳转成正常时间const data = new Date(time)let Y = data.getFullYear();let M = (data.getMonth() + 1).toString().padStart(2,0);let D = data.getDate().toString().padStart(2,0);let h = data.getHours();let m =data.getMinutes().toString().padStart(2,0)let s = data.getSeconds().toString().padStart(2,0)return  format.replace('YYYY',Y).replace("MM",M).replace("DD",D).replace("hh",h).replace("mm",m).replace("ss",s)}
},

格式化为相对时间的全局过滤器

// 定义一个全局的过滤器
// 格式化为相对时间  使用了Day.js中的relativeTime插件
Vue.filter('relativeTime',function (value) {return dayjs().to(dayjs(value))
})

水墨新闻gitee地址https://gitee.com/kdwangwenjie/ink-cms.git（wenjie分支）
项目展示地址http://118.190.150.49:13144/