學習不易，用vue寫了一個入門專案——知乎日報

andefine發表於2019-03-04
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

截圖

學習不易，用vue寫了一個入門專案——知乎日報

學習不易，用vue寫了一個入門專案——知乎日報

學習不易，用vue寫了一個入門專案——知乎日報

記錄下的一些知識點(有些沒記下那就是忘了==)

  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的基本用法已經有所掌握，希望這個小專案也能幫到你。在此再次感謝參考到的專案、文章、教程的大佬作者們

相關文章