基於vue2+vuex+vue-router+sass+webpack的網易雲音樂

来源:https://www.cnblogs.com/HeavenBin/archive/2018/01/10/8261724.html
-Advertisement-
Play Games

這段時間寫的一個項目,供給大家互相學習,有什麼疑問可以issues我。 ...


  【本博客為原創:http://www.cnblogs.com/HeavenBin/   

前言:

  這段時間寫的一個項目,供給大家互相學習,有什麼疑問可以issues我。

源碼地址:https://github.com/HeavenBin/VueMusic

項目構成

├── build                  // webpack配置文件
├── config            		 // 不同環境的打包配置
├── dist               		 // 生產目錄
├── index.html          	 // 入口html文件
├── package.json      		 // 項目配置文件
├── static       			     // 放置靜態資源
├── src                		 // 開發目錄
│   ├── pages     		     // 頁面
│   ├── components     		 // 組件
│   ├── config     		     // 基本配置
│   ├── images     		     // 公共圖片
│   ├── plugins     		   // 引用插件
│   ├── router     		     // 路由配置
│   ├── service         	 // 數據交互
│   ├── store     		     // vuex狀態管理
│   ├── style     		     // 公共樣式
│   ├── App.vue          	 // 頁面入口文件
│   └── main.js       	   // 程式入口文件

技術棧

  • Vue2:採用現代漸進式框架Vue2的版本
  • Vuex:管理公共組件狀態量
  • vue-router:管理單頁面應用路由
  • 自定義ajax:基於xmlhttprequest對象以及新興Fetch對象結合封裝的http請求
  • CSS3:CSS3動畫及樣式。
  • Sass:css預處理語言。
  • Webpack:自動化構建工具,主要配置vue-cli腳手架提供。
  • ES6:採用ES6語法。
  • SVG:基於可擴展標記語言的可縮放矢量圖形。
  • 介面來源(感謝Binaryify不斷更新的網易雲音樂介面)

  如果您認為這篇文章還不錯或者有所收穫,您可以通過掃描一下下麵的支付寶二維碼 打賞我一杯咖啡【物質支持】,也可以點擊右下角的【推薦】按鈕【精神支持】,因為這兩種支持都是我繼續寫作,分享的最大動力

支付寶


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 背景 iPhone X 劉海機於9月13日發佈,給科技小春晚帶來一波高潮。作為開發人員卻多出來一份憂慮,iPhone X 怎麼適配?我們 App 的腦袋會不會也長一劉海出來?Tabbar 會不會被圓角?先來看一下美團 App 的表現: 圖 1.1 啟動時的 App 表現 圖 1.2 下拉刷新之後的表 ...
  • iOS11對WKWebView的功能進一步完善,新增如下功能: ...
  • 今天研究了一下在Xcode中創建多個工程,達到模塊化的目的的同時,實現多個相似項目的協同開發,最主要的是可以實現多工程連編。項目的效果如下: 接下來創建一個這樣的項目,以及他們之間的通信 1.建一個文件夾MyProject(這是本人採用的文件夾) 2.在MyProject文件夾下創建一個工作空間My ...
  • 一. 背景 PS:相關知識:ListView與RecyclerView緩存機制原理大致相似,如下圖所示: 滑動過程中,離屏的ItemView即被回收至緩存,入屏的ItemView則會優先從緩存中獲取,只是ListView與RecyclerView的實現細節有差異.(這隻是緩存使用的其中一個場景,還有 ...
  • 之前一直做的是.NET開發用的是C#語言,近段時間由於做一個APP這才用上了java,在二維碼掃描整合到APP裡面遇到掃描二維碼之後沒有返回值,經過反覆的嘗試最後終於拿到了返回值,之後覺得很有必要記錄一下所以在這裡分享出來。 在網上下載Zxing開源包之後導入AndroidStudio 在Mainf ...
  • CSS3的過渡和轉換 1.過渡 什麼是過渡呢?過渡通俗的來說就是從一個樣式到另一個樣式的逐漸轉換改變的效果。 過渡的屬性: transition:是一個簡寫屬性,用於設置四個過渡屬性,所以說我們用的時候只寫這個屬性就行了。 transition-property:規定應用過渡效果的屬性(可以設置單個 ...
  • 1.使用 MongoDB模塊 進行操作 首先在工作目錄安裝 mongodb 模塊, 2.使用 Mongoose模塊 進行操作 2.1 創建文件db.js用來連接(其實這一步也有一點問題,不應該把資料庫連接寫到這裡) //創建文件 db.js // 在這之前你應該已經安裝了 mongoose || c ...
  • 有點晚了,不知不覺就到11點了,今天比昨天狀態更好些了,不過期末考試就快來了,夜深人靜的時候就想著或許自己應該成熟一點,而不是每天還在走神什麼之類的…… homework5終於是寫完了,一個簡單的日曆系統。。。 在寫的過程中,發現之前很多學的基礎都忘記了,所以也是在看過老師寫了一遍之後,自己才能把這 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...