筆記倉(cāng)庫(kù)：https://github.com/nnngu/LearningNotes
上一篇文章用爬蟲(chóng)自動(dòng)下載了一些圖片，這一篇就用這些圖片做一個(gè)音樂(lè)相冊(cè)吧臭觉！
效果預(yù)覽
點(diǎn)擊圖片昆雀，切換到背面：
演示地址
演示地址：https://nnngu.github.io/MusicPhoto/
環(huán)境搭建
1、安裝 npm蝠筑，安裝成功后狞膘，在終端輸入 npm -v 可以查看它的版本。
2什乙、安裝generator-react-webpack挽封，使用如下命令：
npm install -g generator-react-webpack
安裝完成之后，輸入npm list --depth=0 -global 可以查看版本稳强。
3场仲、創(chuàng)建項(xiàng)目，打開(kāi)你用來(lái)存放代碼的目錄退疫，然后輸入：yo react-webpack MusicPhoto
4渠缕、創(chuàng)建完成，項(xiàng)目的目錄如下圖：
需要注意的幾個(gè)地方：
- ① cfg 目錄是配置文件所在的目錄
- 重點(diǎn)關(guān)注 cfg 目錄里面的 defaults.js 文件
- ② src 項(xiàng)目的源代碼主要在這里面
- ③ package.json 用來(lái)管理和配置依賴(lài)模塊
添加 autoprefixer-loader 模塊
autoprefixer-loader 是用來(lái)處理 css 的模塊褒繁，安裝命令：
npm install autoprefixer-loader --save-dev
然后打開(kāi) cfg 目錄中的 defaults.js 添加如下配置信息：
添加 json-loader 模塊
json-loader 是用來(lái)處理 json 的模塊亦鳞，安裝命令：
npm install json-loader --save-dev
然后打開(kāi) cfg 目錄中的 defaults.js 添加如下配置信息：
添加圖片
1、在 src 目錄下添加 images 目錄和一些圖片，如下圖：(圖片尺寸全部是 260 * 260)
2燕差、添加 imageDatas.json 如下圖：
imageDatas.json 里面的代碼請(qǐng)參照項(xiàng)目的源代碼遭笋。
3、在src/components/Main.js中引入imageDatas.json 代碼如下：
// 獲取圖片的 json 數(shù)據(jù)
var imagesData = require('../data/imageDatas.json');
4徒探、根據(jù)圖片的文件名瓦呼，生成圖片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);
配置字體
打開(kāi) cfg 目錄中的 defaults.js 添加如下配置信息：
組件的綁定
src/index.html 中的關(guān)鍵代碼：
src/index.js 中的關(guān)鍵代碼：
代碼邏輯
主要的代碼邏輯在 Main.js中测暗，主要的布局樣式在 App.scss中央串。如下圖：
具體代碼請(qǐng)參照項(xiàng)目的源代碼 https://github.com/nnngu/MusicPhoto
發(fā)布到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 對(duì)應(yīng)的倉(cāng)庫(kù)里面開(kāi)啟 Github Pages 功能瘫想，并選擇 gh-pages分支即可。
??????下一篇將會(huì)總結(jié)完成音樂(lè)播放器的過(guò)程袄友。??????
