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

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

一直在学习vue，看文档、看博客、写小例子，可是仔细想一想仍是须要一个项目来增强对vue的掌握程度。项目不是很庞大，很是适合用来练习和检验，并且有大神分析好的API，不用为获取数据烦恼(￣▽￣)~*

项目中基本功能差很少都已实现，一些没有接口或其余地方并无实现。整个项目中确定是存在着问题的，若遇到bug你能够本身修复或者告知我，，嗯，对，就这样。

github地址 vue-zhihu-daily

声明

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

致谢

izzyleung 整理的 知乎日报 API 分析

cccyb 的 vue-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不要，其余通通默认

2. 使用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]
复制代码

3. 在style中能够直接写scss

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

4. 配置开发时的api代理，实现跨域，修改config/index.js，找到proxyTable，修改：

proxyTable: {
  '/api': {
    target: 'https://news-at.zhihu.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'
    }
  }
}
复制代码

• 参考使用vue-cli+axios配置代理进行跨域访问数据
  
• vue-cli的template文档中也有说明API Proxying During Development

5. 使用axios获取的图片url直接放在img的src属性中，出现403的错误

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

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

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

7. 返回不刷新，前进刷新的方案

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

8. 项目打包如何运行

项目打包完成以后控制台提示以下，不信能够直接去文件中直接打开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的基本用法已经有所掌握，但愿这个小项目也能帮到你。在此再次感谢参考到的项目、文章、教程的大佬做者们