上一篇文章用爬蟲自動下載了一些圖片，這一篇就用這些圖片做一個音樂相簿吧！
效果預覽
點選圖片，切換到背面：
演示地址
演示地址：nnngu.github.io/MusicPhoto/
環境搭建
1、安裝 npm，安裝成功後，在終端輸入 npm -v 可以檢視它的版本。
2、安裝generator-react-webpack，使用如下命令：
npm install -g generator-react-webpack
複製程式碼安裝完成之後，輸入npm list --depth=0 -global 可以檢視版本。
3、建立專案，開啟你用來存放程式碼的目錄，然後輸入：yo react-webpack MusicPhoto
4、建立完成，專案的目錄如下圖：
需要注意的幾個地方：
- ① cfg 目錄是配置檔案所在的目錄
- 重點關注 cfg 目錄裡面的 defaults.js 檔案
- ② src 專案的原始碼主要在這裡面
- ③ package.json 用來管理和配置依賴模組
新增 autoprefixer-loader 模組
autoprefixer-loader 是用來處理 css 的模組，安裝命令：
npm install autoprefixer-loader --save-dev
複製程式碼然後開啟 cfg 目錄中的 defaults.js 新增如下配置資訊：
新增 json-loader 模組
json-loader 是用來處理 json 的模組，安裝命令：
npm install json-loader --save-dev
複製程式碼然後開啟 cfg 目錄中的 defaults.js 新增如下配置資訊：
新增圖片
1、在 src 目錄下新增 images 目錄和一些圖片，如下圖：(圖片尺寸全部是 260 * 260)
2、新增 imageDatas.json 如下圖：
imageDatas.json 裡面的程式碼請參照專案的原始碼。
3、在src/components/Main.js中引入imageDatas.json 程式碼如下：
// 獲取圖片的 json 資料
var imagesData = require('../data/imageDatas.json');
複製程式碼4、根據圖片的檔名，生成圖片URL。
src/components/Main.js
/**
* @imagesDataArray {Array}
* @return {Array}
*/
imagesData = (function getImageURL(imagesDataArray) {
for (var i = 0, j = imagesDataArray.length; i < j; i++) {
var singleImageData = imagesDataArray[i];
singleImageData.imageURL = require('../images/' + singleImageData.fileName);
imagesDataArray[i] = singleImageData;
}
return imagesDataArray;
})(imagesData);
複製程式碼配置字型
開啟 cfg 目錄中的 defaults.js 新增如下配置資訊：
元件的繫結
src/index.html 中的關鍵程式碼：
src/index.js 中的關鍵程式碼：
程式碼邏輯
主要的程式碼邏輯在 Main.js中，主要的佈局樣式在 App.scss中。如下圖：
具體程式碼請參照專案的原始碼 github.com/nnngu/Music…
釋出到Github Pages
1、修改cfg/defaults.js中的publicPath，改為publicPath: './assets/', 如下圖：
2、打包，使用npm run dist指令。打包完成可以看到如下目錄：
3、把打包好的目錄 push 到 GitHub 的 gh-pages 分支，使用如下命令：
git subtree push --prefix=dist origin gh-pages
複製程式碼4、在GitHub 對應的倉庫裡面開啟 Github Pages 功能，並選擇 gh-pages分支即可。
???下一篇將會總結完成音樂播放器的過程。???