知乎日報
本項目主要使用 vue 的全家桶進行開發,項目中使用的 API 來自 知乎Api,通過完成此項目,加深了對 vue 全家桶的學習和理解。
API在使用的過程中遇到了跨域的問題,通過搭建node http 服務,用於轉發 API 請求,解決跨域問題,之后將 node http 服務部署到 Heroku ,可以在線訪問。
項目地址
https://github.com/yangrenmu/zhihuDaily
演示
- 在線演示
- 移動端演示,掃描下面二維碼即可。
技術棧
- vue
- vuex
- vue-router
- axios
- swiper
Build Setup
# 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
項目結構
├── src │ ├── common │ │ ├── css // 公共的 css │ │ └── fonts // 圖標字體 iconfont │ ├── components │ │ ├── Article.vue // 文章 │ │ ├── ArticleList.vue // 文章列表 │ │ ├── Comment.vue // 評論 │ │ ├── HomePage.vue // 首頁 │ │ ├── Sidebar.vue // 側邊欄 │ │ ├── Swiper.vue // 輪播圖 │ │ └── Theme.vue // 日報主題 │ ├── router │ │ └── index.js // 路由配置 │ ├── vuex │ │ └── store.js // 狀態管理 │ ├── App.vue // 主組件,切換頁面 │ └── main.js // 初始化 vue 實例並使用需要的插件 ├── static // 靜態資源,css 樣式重置及 swiper 插件 ├── eslintrc.js // 配置 eslint ├── index.html // 項目入口文件 └── package.json // 項目配置文件
項目截圖