學習不易，用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的基本用法已經有所掌握，但願這個小項目也能幫到你。在此再次感謝參考到的項目、文章、教程的大佬做者們