用yeoman搭建react画廊项目笔记
1、安装yeoman
npm install yo -g
yo --version //检测 yeoman版本,成功显示版本号,则安装成功
2、到yeoman官网 http://yeoman.io/generators/ 搜索寻找项目生成器(基于react和webpack构建的项目)
选择 [ react-webpack ] 项目,打开链接如下:
https://github.com/react-webpack-generators/generator-react-webpack#readme
安装generator:npm install -g generator-react-webpack
通过查看电脑最顶部环境安装了哪些全局包来查看generator-react-webpack是否安装成功:npm list --depth=0 -g
3、在自已的github上建一个项目(gallery-by-react)
项目新建时选择 MIT License,然后创建
4、安装好Git,(自行百度谷歌下载安装)
5、用git把github上刚建的项目clone下来
找到自己管理项目的文件夹,然后执行以下clone命令:
git clone https://github.com/zoujian3820/gallery-by-react.git
进入项目文件夹中:cd gallery-by-react
用generator-react-webpack来生成我们的项目:yo react-webpack gallery-by-react
选用SASS预处理语言,选用默认 .js 文件,然后等待项目安装- - - -
安装成功后,直接:npm run start 把项目跑起来
6、安装react谷歌调试工具
推荐QQ浏览器,在应用商店中直接搜索React Developer Tools 然后添加工具插件
7、安装stylus
由于安装sass-loader和node-sass一直安装不成功(欲哭无泪),so 选择了更方便的stylus
在package.json中添加以下依赖 --- npm install
"stylus": "0.54.5",
"stylus-loader": "^2.5.1"
8、安装autoprefixer + postcss-loader
(由于autoprefixer-loader已经被webpack废弃,已经推荐使用autoprefixer + postcss-loader的方式) 最坑爹的地方//(ㄒoㄒ)// 流泪中...
在package.json中添加以下依赖--- npm install
"autoprefixer": "^7.1.6",
"postcss-loader": "^2.0.8"
9、修改webpack配置
本包由于用react-webpack建的(官方好久都没更新了),用的是webpack1.15.0的版本(有点小郁闷,导致跟现在webpack脱轨,很多配置不一样)
http://yeoman.io/generators/ 搜索react-webpack,就下面链接这货:https://github.com/react-webpack-generators/generator-react-webpack#readme
如上图,这是项目的总体结构
一、defaults.js是我们要修改webpack配置的文件:
在其中找到函数getDefaultModules,然后loader中添加 !postcss-loader 如下,是已经添加好了的
function getDefaultModules() {return {preLoaders: [{test: /\.(js|jsx)$/,include: srcPath,loader: 'eslint-loader'}],loaders: [{test: /\.css$/,loader: 'style-loader!css-loader!postcss-loader'},{test: /\.styl/,loader: 'style-loader!css-loader!postcss-loader!stylus-loader'},{test: /\.(png|jpg|gif|woff|woff2)$/,loader: 'url-loader?limit=8192'},{test: /\.(mp4|ogg|svg)$/,loader: 'file-loader'}]};
}
二、引入autoprefixer
在根目录下新建一个名称为postcss.config.js的js文件,如上图所示
然后在其中添加如下这段代码:
module.exports = {plugins: [require('autoprefixer')]
}
三、使用stylus并检测autoprefixer是否生效
1、找到 src/components/Main.js 点击打开,然后把 require('styles/App.css'); 这句代码修改成 require('styles/App.styl');
2、再找到 src/styles/App.css并把文件扩展名改成 .styl 点击打开,在其中加入
bodydisplay :flexbox-sizing:border-boxbackground : red
这段代码,然后 npm run start 跑一下,打开控制台,查看元素body,看是否为其自动加上了各浏览器兼容的 hack 缀名
到此ok,项目搭建算告一段落...... 附上源码包,猛击下载
10、手动加入模似的静态json数据
1、新建一个data文件夹,再建一个imageDatas.json文件,把图片的json数据加入进去
2、安装json-loader
npm install json-loader --save-dev 或者 cnpm install json-loader --save-dev
修改webpack配置文件defaults.js
在其中找到函数getDefaultModules,然后loaders中添加一段匹配的正则
{test: /\.json$/,loader: 'json-loader'
}
gitub完整项目源码地址:
https://github.com/zoujian3820/gallery-by-react
在线demo:
https://zoujian3820.github.io/gallery-by-react/
转载于:https://www.cnblogs.com/MrZouJian/p/7699941.html
用yeoman搭建react画廊项目笔记相关推荐
- 从零开始搭建React开发项目之抖音“剪映”——创作课堂(基础入门篇)
前言 React是近几年来前端项目开发非常火的一个框架,其背景是Facebook团队的技术支持,市场占有率也很高,对于很多新手来说可能很多人都在犹豫是选react还是vue,如果时间充裕的话还是首选r ...
- 使用webpack2.0 搭建react.js项目
最近一段时间没有写react.js,发现webpack已经完全升级为2.0了,升级后导致以前的项目不能正常编译,只能重新实践一番 关于webpack2.0和1.x的区别概括起来就是tree shaki ...
- umi搭建react+antd项目(一)环境配置
1.先创建文件夹,windows用户手动创建就行了 mkdir myReact && cd myReact 2.在myReact目下,执行脚手架命令,默认选择antd yarn cre ...
- 从零搭建react + webpack项目
初始化项目 mkdir my-react cd my-react npm init 安装 webpack npm install webpack webpack-cli --save-dev 最简单的 ...
- umi搭建react+antd项目(六)父子组件通讯
上一篇写了一个子组件,只是把值传入进来,这篇讲解在子组件修改父组件的数据 1.在index.js里,新增方法:updateImg 用于修改list集合 updateImg() {this.setSta ...
- umi搭建react+antd项目(五)子组件编写
上一篇在index.js里面写了一个组件,不是很友好,我们现在分开写组件 1.新建component文件夹用于放置组件,src/component,新建list组件 import React, {Co ...
- umi搭建react+antd项目(四)axios请求数据
1.下载axios yarn add axios 2.在src下新建文件夹conf,再新增js文件:axiosConf.js import axios from 'axios'axios.defaul ...
- umi搭建react+antd项目(二)路由
1.我们在src下新增index2.js: import React, {Component} from 'react';export default class index2 extends Com ...
- umi搭建react+antd项目(三)Mock 数据--模拟数据
1.添加mockjs yarn add mockjs 2.在mock目录下新建test.js List|10,返回list,10条数据 @image,随机生成img的url链接,mock内置函数 im ...
最新文章
- Ubuntu 安装 IPython、jupyter notebook
- 一个多年网络工程师总结的工作实用经验
- python简单编程例子-Python实现的简单万年历例子分享
- python费用结算系统_python 全栈开发,Day104(DRF用户认证,结算中心,django-redis)
- tomcat自启动设置
- 阿里巴巴在内蒙古旱区试水物联网灌溉技术,一年省出1.5个西湖
- js动态添加的元素,动作绑定
- java saveas绝对路径_java实现对文件的各种操作(转)
- 代码回到之前版本_聊一聊版本控制
- bootstrap - 弹出层
- Razor的主版页面框架
- 从yesno模型入门kaldi语音识别
- 每日一题【33】解析几何-椭圆的垂径定理与焦半径公式
- FM立体声 matlab 左右,FM立体声收音机的制作
- Eel——js 如何调用python的函数
- Spire.XLS:一款Excel处理神器(2)
- docker 搭建在线vscode编辑器
- 服务器文件增量备份,服务器文件增量备份
- 手机如何打开开发者选项
- Latex 的交叉引用
热门文章
- ERROR: unable to bind listening socket for address '127.0.0.1:9000': Address already
- 怎么用shell ssh,然后再exit?
- 企业IT构建核心基础架构解决方案
- 使用tensorflow object detection API 训练自己的目标检测模型 (二)labelImg的安装配置过程
- 台式计算机 一万元,一万元左右i7-8700K/Z370/GTX1070Ti水冷游戏台式电脑主机配置推荐(2)...
- oracle sql不用distinct去除重复,oracle sql 去重复记录不用distinct如何实现
- 订单生产计划表范本_服装生产管理必看丨一文解决车间管理混乱
- 一键开启微信“开关头像”,快试试!
- 萌新的Python练习菜鸟100例(十八)求s=a+aa+aaa+aaaa+aa...a的值
- SAP License:与猎头的亲密接触之你不得不知的潜规则