使用 vue2 制作一個知乎日報


知乎日報

  本項目主要使用 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 // 項目配置文件

項目截圖



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM