基于 React + Webpack 的音乐相册项目(上)

2018-02-08 11:04:30来源:作者:人点击

分享

笔记仓库:https://github.com/nnngu/LearningNotes


上一篇文章用爬虫自动下载了一些图片,这一篇就用这些图片做一个音乐相册吧!

效果预览

点击图片,切换到背面:

演示地址

演示地址:https://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');

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台