• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >div/css > 从搭建一个React项目,同时使用git把项目放到GitHub上

从搭建一个React项目,同时使用git把项目放到GitHub上

作者:anzhi0611的博客 字体:[增加 减小] 来源:互联网 时间:2017-09-02

本文主要包含如果往github添加项目,github,git等相关知识,anzhi0611的博客希望在学习及工作中可以帮助到您

用React框架开发项目该有的工具就不必多说了,目前我是用的Visual Studio Code这个软件(https://code.visualstudio.com/),个人感觉还是很好用的。

该有的工具有了之后,通过git init 生成package.json 文件,当时我搭建的项目的时候,最好把依赖这里放到 --save-dev 当时我将依赖放到--save 时,编译不过去,一下就是我的package.json配置信息,可以给你们借鉴一下

{
  "name": "package.json",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
  },
  "author": "Tangable",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "style-loader": "^0.18.2",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  }
}

 

 

 

webpack.config.js配置信息

 

var path = require('path');

module.exports = {
    entry: path.resolve(__dirname, './src/main.js'),
    output: {
	    path: path.resolve(__dirname, './build'),
	    filename: 'bundle.js',
	},
    module: {
	    //加载器配置
	    loaders: [
	        {
        		test: /\.css$/,
        		loader: 'style-loader!css-loader'//添加对样式表的处理
      		},
	        { 
	        	test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'
	    	},
	        { 
	        	test: /\.js$/,loader: 'babel-loader',
	        	exclude: /node_modules/, 
	        	query: {
	        		presets: ['es2015','react']
	        	}
	    	}
	    ]
	},
};

 

 

二 配置公钥和密钥 ,

1 首先在你的Github上面new repository,建好仓库之后

   打开 git bash,输入

ssh-keygen -t rsa  

便会生成三个文件id_rsa 和 id_rsa.pub,id_rsa就是密钥,id_rsa.pub就是公钥,打开id_rsa.pub这个放公钥的文件,把里面的内容都拷贝下来,

 

然后打开Github 设置这里找到SSH And GPG keys点进去,点击 Add SSH key按钮;title这一栏可以不用填,把刚刚拷贝的东西进去之后,

SSH key添加成功之后 回到git bash这里。输入

 

ssh -T git@github.com 

当看到,git输出这样一段话,表示成功了

Hi Tangable! You've successfully authenticated, but GitHub does not provide shell access.

 

 

三上传项目到GitHub上

 1 在项目下点开 git bash 输入:

 

 git init 

  项目目录下会生成一个 .git 的文件,默认是隐藏的这个文件,你可以把隐藏的文件开来,就能看到

 

 

 

 2 查看状态

 

git status

 3 添加文件到暂存区

 

 

git add .

 

4 正事提交代码

 

git commit -m "注释"

 

5 向远程仓库 提交代码

 

git push origin master

 

 

 

6 将本地的项目跟GitHub 上面之前建的仓库进行关联(必须要有)

 

git remote add origin git@github.com:Tangable/ReactDemo.git 

git@github.com:Tangable/ReactDemo.git 这个是你之前建的参考地址,这里我填的是我项目的地址

 

(查看我们当前项目有哪些远程仓库)

 

git remote -v  

 

提交代码时如果出现这个问题,

 

$ git push origin master  
To github.com:JasonLi-cn/test.git  
 ! [rejected]        master -> master (fetch first)  
error: failed to push some refs to 'git@github.com:Tangable/ReactDemo.git 
hint: Updates were rejected because the remote contains work that you do  
hint: not have locally. This is usually caused by another repository pushing  
hint: to the same ref. You may want to first integrate the remote changes  
hint: (e.g., 'git pull ...') before pushing again.  
hint: See the 'Note about fast-forwards' in 'git push --help' for details.  


说明远程仓库有有文件是你本地仓库没有的, 你就得先更新代码

 

 

git pull origin master  


如果此时又出现这个问题

 

$ git pull origin master  
From git@github.com:Tangable/ReactDemo.git 
 * branch            master     -> FETCH_HEAD  
fatal: refusing to merge unrelated histories 

解决办法

 

 

 

git pull origin master --allow-unrelated-histories 


一般React项目里面是没有 .gitignore这个文件的,这文件的主要作用是忽略一些不必要的文件,像我们的项目依赖这个node_modules这文件是不必要提交到GitHub远程仓库上面的,所以 .gitignore是很有必要加上去的,在git bash 里面输入 touch .gitignore 便会在项目里面生成,这个就是我项目中 .gitignore文件面的内容

 

.DS_STORE
node_modules
*~
*.log*

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

您可能想查找下面的文章:

  • 从搭建一个React项目,同时使用git把项目放到GitHub上

相关文章

  • 2017-06-02DIV+CSS 清除浮动常用方法总结
  • 2017-06-02DIV CSS制作网页时易犯的错误总结
  • 2017-06-02css vertical-align属性的一些理解与认识(一)
  • 2017-06-02设置DIV最小高度以及高度自适应随着内容的变化而变化
  • 2017-06-02css中background-size属性使用介绍
  • 2017-06-02div不能自适应高度不能随图片的高度变化
  • 2017-06-02div中英文无法自动换行的解决办法
  • 2017-06-02div style常用属性介绍及使用示例
  • 2017-06-02纯DIV+CSS实现圆角代码
  • 2017-06-02div css制作网页实战笔记心得

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • DIV无法自动高度 IE8无法自动高度
    • css float浮动属性的深入研究及详解拓展(二)
    • DIV CSS技术是否适合中国中小网站?
    • 详解CSS中的z-index属性在层叠布局中的用法
    • 组织结构可以任意拖动到指定位置div
    • div overflow 超出隐藏属性使用说明
    • css实现随鼠标移动div渐变色效果
    • CSS属性简写整理
    • 独行DIV自适应宽度布局CSS实例与应用范围
    • div+css实现仿淘宝的产品分类菜单效果代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有