基于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/