news project by react (已不维护)
在线效果展示:Demo: https://ghcdg.github.io/react-news
工具、框架:yeoman、webpack、react、Ant Design等
主要功能包括:主界面的注册、登录,主界面的新闻数据获取、展示,个人中心的评论、收藏,PC客户端与手机客户端的适配等。
1、下载项目: 使用git命令:git clone git@github.com:ghcdg/react-news.git 或者 git clone https://github.com/ghcdg/react-news.git 进行下载
2、打开命令提示符窗口 cmd:进入该项目目录(即 react-news 目录中)
3、本地安装npm包:在当前目录下输入命令:npm install【该命令会根据 package.json 文件安装对应的模块】,安装完成后当前目录下会有一个 node_modules 的目录【注意:使用npm命令前请确保电脑已经安装nodejs,更多信息可查看:npm官网:https://docs.npmjs.com/getting-started/what-is-npm 或者npm中文文档: https://www.npmjs.com.cn/】
4、启动服务器:在当前目录下运行命令:npm run start,稍后cmd窗户中会提示 Open in iframe mode: http://localhost:8080/webpack-dev-server/ Open in inline mode: http://localhost:8080/ 【具体端口可在cfg文件下的default.js中修改,有关项目的更多命令可查看项目中的 package.json 文件】
5、打开浏览器,在地址栏输入:http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 查看项目效果
1、使用 yeoman 脚手架搭建项目框架(yeoman安装使用详情可到官网查看)
2、下载项目生成器:项目使用 react-webpack 构建(可在github搜索并按照相关提示安装使用)
3、在github上新建一个仓库(此处仓库名为:react-news),将 github 中新建的仓库 react-news 下载到本地,cmd/GitBash 进入到当前文件夹 react-news 中,使用命令:yo react-webpack react-news (命令分别为:yeoman命令,项目生成器,项目名称)来生成项目,项目生成过程中的设置可结合自身需要选择(如,本项目过程中没有使用到sass,在选择的时候就选css),否则默认即可
4、项目生成后,可根据实际需要自行修改项目以适应实际开发需求,其中目录结构、文件配置等详情,可查看 yeoman 官网,或自行使用的脚手架官网
1、项目打包:个人为了使本项目打包好后可以直接运行,进入 cfg 文件中的 default.js 文件,将其中的 publicPath: '/assets/',修改为 publicPath: './assets/',保存后运行 npm run dist 重新编译,dist 文件将会被更新
2、项目上传:使用相应的 git 命令上传项目
3、使用 git subtree push --prefix=dist origin gh-pages 命令将当前项目中的 dist 文件推送到当前仓库的 gh-pages 分支即可在线查看 demo,其 URL 为: https://(你的 github 用户名).github.io/ 项目(仓库)名称(如:https://ghcdg.github.io/react-news ,前提: 先搭建 github.io,详情自行搜索)
项目中的dist文件夹是已经打包好的项目文件:下载后可直接打开dist文件的index.html查看效果【index.html和assets为打包后最终生成的文件】
" ![image](此处为github中查看图片时的url地址) "
如:" ![image](https://github.com/ghcdg/react-news/blob/master/src/images/pro.png) "