为了账号安全,请及时绑定邮箱和手机立即绑定

React实战--打造画廊应用(上)

postcss.config.js的内容
module.exports = {
parser: 'postcss-less', //限制语法结构,这里采用LESS
plugins: {
'postcss-import': {},

'autoprefixer':{ //自动加浏览器前缀的插件
browers: ['last 5 versions','ie >= 12']
},
'cssnano': {} // 必须把这个放在下面,是压缩css的插件
}
}
2017年11月的react-webpack 生成的项目加入postcss的方法:
1. 首先安装一堆包 postcss-less、postcss-loader、postcss-import、cssnano、autoprefixer
2. 在需要编译css的目录创建配置文件 postcss.config.js
3. 然后!配置loader!在default.js里面
test: /\.css$/,
loader: 'style-loader!css-loader!postcss-loader'
胸大的帮我一下
是呀~好多都变得不一样了~命令中指定了less 但是在项目中却没找到

最新回答 / 努力奋斗的小黄人
是不一样,不过没有错,老师配置的那些loader的加载项,都在cfg文件夹下的default.js中,主体结构是一样的,后面还会出现老师那样的函数声明写法不能用。https://github.com/wjma110/gallery-by-react,这是我的项目地址,可以交流学习
老师源码:https://github.com/materliu/gallery-by-react

最新回答 / 单纯的土豆
换mac系统吧 windows配置就是个坑
向下取整可以使用 `~~(Math.random() * MaxNumber)` 的方法。
大家可以去看比较新的课程,《使用React构建一款音乐播放器》,也是慕课网的
refs到的组件<ImgFigure/>只有几个属性,要接着refs到下面真实的DOM节点,才有scrollWidth等一大堆属性
劝大家现在这一章节随便找个图片取名1.jpg放入images文件夹下,把后面的图片名也都改成1.jpg,这样就能防止后面因为查询不到而报错。
新版本default.js文件老师加的这句
{
test: /\.json$/,
loader: 'json-loader'
},
就是可以不用再在新版本Main.js里老师写的var imageDatas = require('../data/imageDatas.json');这句不用加json!,也就是var imageDatas = require('json!../data/imageDatas.json');;这两种方法都能运行。

最新回答 / 慕设计7857085
https://github.com/jekorx/gallery-by-react/,这个里面是老师最新的代码,纠正修改了许多不足的地方
其实大家仔细看还是有迹可循的,就是文件位置变化,名字变了下,理论上能领悟就能做到了,现在版本的像这些js文件都被放在node_modles里,webpack对应webpack.js、webpack-dev-server对应Server.js(大写的S)。
我用的是webstorm编辑器,先在主目录下找到server.js(小写s),进去后最上面几行按(ctrl+鼠标左键)就可以跳转了;
先帮大家把后面的坑踩掉!运行的grunt build是之前版本的,分别对应现在的:
npm run clean
npm run copy
npm run dist
这几个命令可以去看package.json文件,还有很多;
至于启动服务,则是变成:npm run serve 或者 npm start;
另外,劝大家最好换成淘宝的cnpm,npm有时候是真的慢,等得想死的心都有了!!
淘宝镜像资源: npm config set registry https://registry.npm.taobao.org
检测是否安装成功:npm config get registry
课程须知
您要具备以下前导知识: 1、需要有一定的JS基础 2、CSS前端基础 3、React基础知识 4、了解前端自动化的相关知识,Yeoman,Grunt,Sass等。 5、先学习“React入门”课程
老师告诉你能学到什么?
1、2015年最优秀的前端集成解决方案 2、CSS3动画,变形,字体渲染方式等大前端周边扩展知识 3、真实的项目开发流程 4、如何利用好github保存项目,发布web说明站点。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消