-
一、项目搭建之前，要进行的环境搭建，见（慕课网:ReactLative基础与入门 1-3开发环境搭建-mac平台） 二、yeoman 1、现代web app开发，著名的脚手架工具yeoman，在web项目立项的阶段，用yeoman生成项目文件、代码结构。yeoman自动将最佳实践和工具整合进来，大大加速和方便了我们后续的开发。 2、安装： 见慕课网课程：GRUNT Beginner前端自动化工具 2-2 yeoman，bower,grunt 简介及安装。 三、1、grunt被gulp威胁，然后webpack又威胁了gulp和browerify.（aSuncat:天道好轮回，苍天绕过谁。前端就只有不断地学学学，这样才能提高效率。学就学，老娘无所畏惧。） 四、webpack： 1、安装 终端输入：npm install -g generator-react-webpack 2、查看本地的版本： 终端输入：npm ls -g --depth=1 2>/dev/null | grep generator- （1）npm ls -g :列出全局安装的所有npm包 （2）--depth=1:树状结构最多向下展示一层 （3）2>/dev/null: 如果执行npm ls -g的过程中，有错误消息，把错误消息重定向到我们的空设备文件上 >表示重定向 1表示standard out标准输出 2表示standard error 标准错误 /dev/null表示空设备文件 （4）|表示通道，用来将上一个命令的输出内容作为下一个命令的输入内容 （5）grep generator-:在前面的输出结果中，检索generator开头的关键字内容。 3、新建的项目拉到本地 （1）进入workspace,终端输入：git clone +项目地址 （2）进入项目目录：cd gallery-by-react(项目名称) （3）终端输入：yo react-webpack gallery-by-react （4）提示是否需要react-router(y/n)，因为这里是单页面程序，不需要路由，所以选n （5）选sass （6）终端输入：grunt-serve，让我们的站点跑起来查看全部
-
关于generator-react-webpack2.0版，目录结构大变样，已经是只需要webpack就能启动项目，我理了一下其目录。 |____.babelrc ES6配置文件 |____.editorconfig EditorConfig插件配置文件，用于统一编码风格。 |____.eslintrc ESLint配置文件 |____.gitignore 需要git同步时忽略文件夹的配置文件 |____.yo-rc.json 未知 |____cfg 这里存放webpack配置 | |____base.js webpack基础配置 | |____defaults.js webpack一些其他的默认配置 | |____dev.js 测试环境的webpack配置，启动npm run start的时候会使用这份webpack设置。 | |____dist.js 线上环境的webpack配置，启动npm run dist的时候会使用。 | |____test.js 做单元测试的时候使用，npm run test |____dist webpack输出目录 | |____README.md | |____static | | |____favicon.ico | | |____README.md |____karma.conf.js 单元测试配置文件 |____npm-debug.log 日志文件 |____package.json 重要！包结构配置文件，并且存放了启动脚本，npm script |____server.js node服务器，用于本地启动这个项目，正是这个脚本启动了webpack编译。 |____src 源代码目录 |____test 单元测试目录 |____webpack.config.js 重要，webpack配置文件入口查看全部
-
关于generator-react-webpack2.0版，目录结构大变样，已经是只需要webpack就能启动项目，我理了一下其目录。 |____.babelrc ES6配置文件 |____.editorconfig EditorConfig插件配置文件，用于统一编码风格。 |____.eslintrc ESLint配置文件 |____.gitignore 需要git同步时忽略文件夹的配置文件 |____.yo-rc.json 未知 |____cfg 这里存放webpack配置 | |____base.js webpack基础配置 | |____defaults.js webpack一些其他的默认配置 | |____dev.js 测试环境的webpack配置，启动npm run start的时候会使用这份webpack设置。 | |____dist.js 线上环境的webpack配置，启动npm run dist的时候会使用。 | |____test.js 做单元测试的时候使用，npm run test |____dist webpack输出目录 | |____README.md | |____static | | |____favicon.ico | | |____README.md |____karma.conf.js 单元测试配置文件 |____npm-debug.log 日志文件 |____package.json 重要！包结构配置文件，并且存放了启动脚本，npm script |____server.js node服务器，用于本地启动这个项目，正是这个脚本启动了webpack编译。 |____src 源代码目录 |____test 单元测试目录 |____webpack.config.js 重要，webpack配置文件入口查看全部
-
一、项目搭建之前，要进行的环境搭建，见（慕课网:ReactLative基础与入门 1-3开发环境搭建-mac平台） 二、yeoman 1、现代web app开发，著名的脚手架工具yeoman，在web项目立项的阶段，用yeoman生成项目文件、代码结构。yeoman自动将最佳实践和工具整合进来，大大加速和方便了我们后续的开发。 2、安装： 见慕课网课程：GRUNT Beginner前端自动化工具 2-2 yeoman，bower,grunt 简介及安装。 三、1、grunt被gulp威胁，然后webpack又威胁了gulp和browerify.（天道好轮回，苍天绕过谁。前端就只有不断地学学学，这样才能提高效率） 四、webpack： 1、安装 终端输入：npm install -g generator-react-webpack 2、查看本地的版本： 终端输入：npm ls -g --depth=1 2>/dev/null | grep generator- 或 npm list --depth=0 -global （1）npm ls -g :列出全局安装的所有npm包 （2）--depth=1:树状结构最多向下展示一层 （3）2>/dev/null: 如果执行npm ls -g的过程中，有错误消息，把错误消息重定向到我们的空设备文件上 >表示重定向 1表示standard out标准输出 2表示standard error 标准错误 /dev/null表示空设备文件 （4）|表示通道，用来将上一个命令的输出内容作为下一个命令的输入内容 （5）grep generator-:在前面的输出结果中，检索generator开头的关键字内容。 3、新建的项目拉到本地 （1）进入workspace,终端输入：git clone +项目地址 （2）进入项目目录：cd gallery-by-react(项目名称) （3）终端输入：yo react-webpack gallery-by-react （4）提示是否需要react-router(y/n)，因为这里是单页面程序，不需要路由，所以选n （5）选sass （6）终端输入：npm run serve 或 npm start，让我们的站点跑起来 (修改端口号：找到cfg文件夹，进入default.js修改端口号)查看全部
-
没有Gruntfile.js不是安装错误，而是generator-react-webpack V2.0 移除了Grunt（webpack替代）。可以执行 npm start 或者 npm run serve 启动服务。查看全部
-
现在webpack版本（v1.12.0）中的配置和视频不同了，loaders 配置在 cfg/defaults.js 中， plugins 配置现在改成分别放置了，例如 cfg/dev.js 中有 dev 所需要的 plugins，而 cfg/dist.js 中有 dist 所需要的 plugins查看全部
-
scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。 clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。 offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。查看全部
-
关于generator-react-webpack2.0版，目录结构大变样，已经是只需要webpack就能启动项目，我理了一下其目录。 |____.babelrc ES6配置文件 |____.editorconfig EditorConfig插件配置文件，用于统一编码风格。 |____.eslintrc ESLint配置文件 |____.gitignore 需要git同步时忽略文件夹的配置文件 |____.yo-rc.json 未知 |____cfg 这里存放webpack配置 | |____base.js webpack基础配置 | |____defaults.js webpack一些其他的默认配置 | |____dev.js 测试环境的webpack配置，启动npm run start的时候会使用这份webpack设置。 | |____dist.js 线上环境的webpack配置，启动npm run dist的时候会使用。 | |____test.js 做单元测试的时候使用，npm run test |____dist webpack输出目录 | |____README.md | |____static | | |____favicon.ico | | |____README.md |____karma.conf.js 单元测试配置文件 |____npm-debug.log 日志文件 |____package.json 重要！包结构配置文件，并且存放了启动脚本，npm script |____server.js node服务器，用于本地启动这个项目，正是这个脚本启动了webpack编译。 |____src 源代码目录 |____test 单元测试目录 |____webpack.config.js 重要，webpack配置文件入口查看全部
-
2. 安装 `YEOMAN`，` npm install -g yo@1.4.7 --registry=https://registry.npm.taobao.org` 3. 安装 `脚手架` `npm install -g generator-react-webpack@1.2.11 --registry=https://registry.npm.taobao.org` 查看版本命令： `npm ls -g --depth=1 2>/dev/null | grep generator` 4. 初始话项目 `yo react-webpack gallery-by-react` ,change:"N-->N-->SASS-->.js" 5. 安装 Grunt `npm install -g grunt-cli --registry=https://registry.npm.taobao.org`查看全部
-
1.安装yeoman 2.npm install -g generator-react-webpack 3.将github项目拉到本地 git clone ... 4.yo react-webpack 项目名 5.npm start 启动服务 6.安装react developer tool用来调试react查看全部
-
scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。 clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。 offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。查看全部
-
坑一：grep window没有这个命令，使用npm list --depth=0 -global查看版本吧
查看全部 -
正常开发一个项目的流程：
在github上创建一个新的仓库，用来存放我们要开发的项目
用“命令”进入到本地的一个工作空间, git clone 生成的项目的地址
cd 项目名
yo react-webpack 项目名
查看全部 -
scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。 clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。 offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。 via：Ancess查看全部
-
安装脚手架根据yeoman：npm install -g yo 安装项目生成器：npm install -g generator-react-webpack 查看项目生成器版本：npm ls -g --depth=1 2>/dev/null | grep generator- -g是指查看全局的安装包，--depth 因为安装包是有树形层次联系的，depth指只查看深度为1的安装包查看全部
举报
0/150
提交
取消