学习不易,用vue写了一个入门项目——知乎日报

8,783 阅读5分钟

使用vue开发的一款知乎日报,样式主要参考安卓版知乎日报(版本号2.6.6)。这个项目比较适合初学者参考学习,大神可以指点指点

一直在学习vue,看文档、看博客、写小例子,但是仔细想想还是需要一个项目来加强对vue的掌握程度。项目不是很庞大,非常适合用来练习和检验,而且有大神分析好的API,不用为获取数据烦恼( ̄▽ ̄)~*

项目中基本功能差不多都已实现,一些没有接口或其他地方并没有实现。整个项目中肯定是存在着问题的,若遇到bug你可以自己修复或者告知我,,嗯,对,就这样。

github地址 vue-zhihu-daily

声明

本项目所有文字图片等稿件内容均由知乎提供,获取与共享之行为或有侵犯知乎权益的嫌疑。若被告知需停止共享与使用,本人会及时删除整个项目。请您了解相关情况,并遵守知乎协议。

致谢

izzyleung 整理的 知乎日报 API 分析

cccybvue-zhihu-daily

Build Setup(vue-cli模板中的,不改了,懒)

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

建议使用chrome的手机调试模式打开

技术栈

  • vue-cli脚手架,用来创建项目结构,基本配置它都已经帮我们搞定,一些额外需求另行配置即可
  • vue+vue-router+vuex 全家桶当然一个都少不了
  • 项目中使用了不少插件:lib-flexible(适配移动端)、vue-awesome-swiper(轮播图)、better-scroll(滚动插件)、axios(尤大亲自推荐的哟)、moment(格式化时间)、mint-ui(其实我就用了一个toast组件0.0)

项目结构中主要部分

  • build: webpack的很多很多很多配置。主要修改:build/utils.js中配置了px2rem-loader
  • config: 项目中的配置啥的。主要修改:config/index.js中配置proxyTable的api代理。
  • src: 写代码的主要地方。
    • assets: 静态资源,我主要放了图标
    • components: 普通组件
    • router: 路由(附上官方文档)
    • store: 状态管理,也就是写vuex的地方(附上官方文档)
    • styles: 样式文件
    • utils: 项目中用到的公用的一些方法
    • views: 视图组件
  • static: 静态文件。和src/assets是有区别的,文档中说这个文件夹下的文件打包时会直接copy,而src/assets下的文件将会被webpack处理,emmmmmmmmm,嗯。还是看文档吧:Handling Static Assets

截图

记录下的一些知识点(有些没记下那就是忘了==)

  1. 使用vue-cli创建项目

几个test不要,其他统统默认

  1. 使用lib-flexible适配移动端

官方已经建议lib-flexible这个方案可以放弃使用(但我就是想用一哈),详细可前往这篇文章:使用Flexible实现手淘H5页面的终端适配
当前推荐的是用viewport来代替此方案,如果你想用,可以慢慢咀嚼这两篇文章:再聊移动端页面的适配如何在Vue项目中使用vw实现移动端适配

扯远了,,还是看这个项目中怎么用的吧。lib-flexible安装完之后在main.js中引入,此时就可以使用rem单位了。然后安装px2rem-loader,这样才可以直接写px单位,安装完需要在build/utils中配置一下,其中有一个cssLoaders的方法,在里面添加一个变量,如下:

const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75,
    remPrecision: 8
  }
}

并且在generateLoaders的函数中,修改一下原来的loaders变量

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]
  1. 在style中可以直接写scss

这个问题一开始磨了挺久,其实贼简单,安装node-sass,sass-loader这两个依赖就啥事没有了。文档有说明:Pre-Processors

  1. 配置开发时的api代理,实现跨域,修改config/index.js,找到proxyTable,修改:

proxyTable: {
  '/api': {
    target: 'https://news-at.zhihu.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'
    }
  }
}
  1. 使用axios获取的图片url直接放在img的src属性中,出现403的错误

解决方法【前端】解决访问api图片403禁止访问问题

  1. vue-awesome-swiper使用v-for渲染数据时,设置loop:true无效

解决方法:在父元素中添加v-if="xxx.length > 0"。答案在此{ loop: true } swiper-slide goes wrong when data is from v-for

  1. 返回不刷新,前进刷新的方案

预实现返回不刷新,所以使用了<keep-alive>。此时返回的确是不刷新了,但是出现了一个新问题,当路由参数改变时,前进也不会刷新= =。(可以先去看一下Vue Router官方文档中Dynamic Route Matching下的Reacting to Params Changes和Navigation Guards)。解决方法参考此篇文章:另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

  1. 项目打包如何运行

项目打包完成之后控制台提示如下,不信可以直接去文件中直接打开index.html试试(我已经试过了0.0)。

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

所以还需要使用http-server这个插件,详细内容可到这里查看利用http-server测试vue-cli打包后的项目。使用这个插件运行时会出现一些问题,文章中也提到了,不多说。

总结

项目虽小,但是用到vue的知识可不少,整个流程下来,vue的基本用法已经有所掌握,希望这个小项目也能帮到你。在此再次感谢参考到的项目、文章、教程的大佬作者们