vue github
介绍：最近在学习使用
vue-cli、webpack快速构建项目及如何将自己写好的项目放到github上面去,并且给访客提供快速入口demo。
自己写了个网易的demo，效果图如下：
demo效果图
demo效果图
demo效果图
当我们在github上面访问别人的项目时,往往会看到一些demo入口,点击它,就会快速的看到项目效果。而不是需要先去将项目clone到本地，再去安装一些依赖,最终在本地起个服务查看效果。如下:
github项目demo快速入口
那么这个是如何实现的？话不多说，跟着我敲即可。
如果你还不清楚什么是vue-cli、webpack及如何使用他们的话,建议你先去看下我的这篇文章:
http://www.jianshu.com/writer#/notebooks/12696453/notes/13528563
第一步：git安装
这个就不多说了，不会的自行百度。
第二步：创建本地仓库（存放本地项目的文件夹）
创建本地仓库
这里我通过命令行,在桌面创建了个myCangku的文件夹,用于存放本地项目。
第三步：进入该文件夹,执行git init命令
进入本地仓库、执行git init
git init: 通过命令git init把这个文件夹变成Git可管理的仓库。这时你会发现myCangku里面多了个.git文件夹，它是Git用来跟踪和管理版本库的。如果你看不到，是因为它默认是隐藏文件，那你就需要设置一下让隐藏文件可见。
第四步：把我们写好的vue项目复制粘贴到该目录下面
将写好的项目复制粘贴进本地仓库
这里我把自己用vue写的项目框架-网易严选复制粘贴进myCangku本地仓库
第五步：git status
查看本地仓库状态
git status:查看当前仓库状态,红色文件表示待add文件
第六步：git add .
添加文件到本地仓库
这里提示你虽然把项目粘贴过来了，但还没有add到Git仓库上，然后我们通过git add .把刚才复制过来的项目全部添加到仓库上。git add后面的点表示把该文件夹的所有东西全部add到本地仓库里。这时我们可以再次通过git status查看本地仓库状态
第七步：git commit -m "first commit"
提交到本地仓库
把刚才add到本地仓库的文件,提交到本地仓库。-m后面引号里面是本次提交的注释内容，这个可以不写，但最好写上，不然会报错。 好了，我们本地Git仓库这边的工作做完了，下面就到了连接远程仓库（也就是连接Github）
第八步：将本地仓库和github仓库关联
大多数 Git 服务器都会选择使用 SSH 公钥来进行授权。系统中的每个用户都必须提供一个公钥用于授权，没有的话就要生成一个。生成公钥的过程在所有操作系统上都差不多。首先你要确认一下本机是否已经有一个公钥。
我们可以先在命令行执行 cd ~ （退回home目录）
再执行 cd .ssh
查看本机是否存在公钥
看一下有没有id_rsa和id_rsa.pub，有 .pub 后缀的文件就是公钥，另一个文件则是密钥。
如果没有的话需要创建该文件--自行百度
这里我本地已经有了这两个文件,执行 vim id_rsa.pub,里面的一长串代码就是你的本机公钥,复制下来
复制该公钥
第九步：登陆github
SSH公钥授权
登录Github,找到右上角的图标，打开点进里面的Settings，再选中里面的SSH and GPG KEYS，点击右上角的New SSH key，然后Title里面随便填，再把刚才id_rsa.pub里面的内容复制到Title下面的Key内容框里面，最后点击Add SSH key，这样就完成了SSH Key的加密。
第十步：创建github仓库
创建github仓库
这里我创建了个名字为my_github_cangku的仓库，并且选择为该仓库添加README.md文件。
第十一步：将本地仓库和github仓库关联起来
进步刚才创建的本地仓库myCangku
执行以下命令
git remote add origin https://github.com/weirui88888/my_github_cangku
这里的网址就是仓库的网址
本地仓库和github仓库关联
这个时候,本地仓库myCangku和github仓库my_github_cangku就已经实现关联了
第十二步：向github仓库推送本地仓库中所有内容
注意首次提交需要执行以下命令
git push -u origin master
由于新建的远程仓库是空的，所以要加上-u这个参数，等远程仓库里面有了内容之后，下次再从本地库上传内容的时候只需下面这样就可以了：
git push origin master
这里有个坑需要注意一下，就是在上面第十步创建远程仓库的时候，如果你勾选了Initialize this repository with a README（就是创建仓库的时候自动给你创建一个README文件），那么到了第九步你将本地仓库内容推送到远程仓库的时候就会报一个failed to push some refs to https://github.com/guyibang/TEST2.git的错。
可能出现异常
这是由于你新创建的那个仓库里面的README文件不在本地仓库目录中，这时我们可以通过以下命令先将内容合并一下：
git pull --rebase origin master
处理异常
这个时候在向github仓库push时就不会报错了,成功push后会是这样
这时候你再重新刷新你的Github页面进入刚才新建的那个仓库里面就会发现项目已经成功上传了：
上传成功
至此，我们已经实现了一半,即将本地仓库推送至github仓库。先放鞭炮庆祝一番。
接下来我们要在刚才创建的github仓库中提供上传项目的demo入口。
我们先进入之前创建的myCangku本地仓库,里面有我写的项目:网易严选,目录结构如下：
网易严选项目结构
进入网易严选项目:cd 网易严选
我们在命令行执行:cnpm run build
执行完毕以后,会生成一个dist目录,里面有一个index.html文件和static目录（用于存放css、js、img）
dist目录结构
这个时候，我们打开dist目录下面的index.html,在控制台会发现一系列关于路径文件找不到而报错。这是因为我们在build之前没有将config目录下面的index.js中的assetsPublicPath由默认的'/'改成'./'
绝对路径改成相对路径
改好之后,我们再次npm run build
成功之后，再次打开dist中的index.html就可以看见自己最终的成果了。但是我们要把它放到github上面去，让别人快速浏览。
接着我们执行命令cd 网易严选
要把本次生成的dist文件,通过以下的命令行,将dist目录上传至github的my_github_cangku中
git add -f "dist" //这里的-f如果不加的话,可能会报错,-f应该是强制添加文件的意思
git commit -m "注释"
git push origin master
这个时候github仓库my_github_cangku的目录结构如下
仓库目录结构
点击该仓库上面的setting,找到github pages模块，将source由none改成master branch。这时会生成一个网址,这个网址就是该github仓库的访问网址,我们在后面拼接上刚才dist中的index.html路径即可
点击仓库setting
source由none设置成master branch
点击save生成网址
如：https://weirui88888.github.io/my_github_cangku/网易严选/dist/index.html
我们将该网址放到README.md中,我们即可实现demo快速浏览。
README.md文件中放入demo地址
好了，至此，我们就已经实现了github上面快速入口demo。以后自己写的一些demo就可以放到github上面，以后出去面试的时候，就可以装逼于无形之中了。
如果对你有帮助，记得动动你们的✋️ ，给个 🤙！
夜已深，就寝。
总结：其实只需要进行下面几步就能把本地项目上传到Github
1、在本地创建一个版本库（即文件夹），通过git init把它变成Git仓库；
2、把项目复制到这个文件夹里面，再通过git add .把项目添加到仓库；
3、再通过git commit -m "注释内容"把项目提交到仓库；
4、在Github上设置好SSH密钥后，新建一个远程仓库，通过git remote add origin https://github.com/guyibang/TEST2.git将本地仓库和远程仓库进行关联；
5、最后通过git push -u origin master把本地仓库的项目推送到远程仓库（也就是Github）上；（若新建远程仓库的时候自动创建了README文件会报错，解决办法看上面）。
https://weirui88888.github.io/my_github_cangku/网易严选/dist/index.html
点击上面链接即可查看网易严选demo
✨✨个人github博客已经开通，期待您的宝贵建议和star✨✨
github博客地址传送门
网友评论