如何用 GitHub 展现本身的产品

前言

再过几天一大批大学生就要投入到找工做的队伍当中，今年毕业生又是创历史新高--820 万。如何让本身在这么多人中脱颖而出？除了长期的基础积累外，额外的营销手法仍是能给本身加加分的。

作软件开发的，或者说对作软件开发有兴趣的同窗都会学习或者动手练习过项目，要么是跟着网站学、要么是对着书本网上看到的东西练习一遍，可是这些个作出来的东西咱们应该如何展现出来，或者是让面试官看到？一定简历也就只是简单介绍本身，面试也只是个把时间，很难把本身会的东西都展现出来。

再者是浏览简历的时候要是看到你作过的做品和源码，其实对于面试官来讲仍是能加很多分的，一定看了你作过的东西基本上能看出不少表面上看不到的东西。

这个就是我接下来要讲的东西，利用 GitHub 来托管本身的源码和展现本身的产品，若是你正在找工做，那么也许对你可能有点帮助。。。

下面是利用 vue 实现页面满屏切换

主要功能点：

1. 实现全屏定时轮播，轮播时间可设置
2. 每屏页面内容可定制
3. 每一个屏都有对应的 key 可手动点击切换，并支持键盘切换
4. key 背景和选中样式可定制
5. 页面切换时动画效果可定制
6. 封装成组件并发布到 npm

实现

• 首先咱们用 vue 模板中的 webpack-simple来快速搭建一个 vue 项目，项目名就叫：vue-pages-toggle，具体搭建细节可看这里传送门
• 详细项目内容看这个vue-pages-toggle
• 效果图，在线demo

由于咱们今天不是谈论怎么写这个插件的，这里就不作详细介绍了,回归到主题.

1. 建立一个 GitHub 帐号
2. 在本身的 GitHub 上建立项目
3. 提交源码到 GitHub
4. 生成线上可预览的项目
5. 发布到 npm 供其余人使用

这里重点讲讲后 3 点，1 和 2 打开GitHub 地址 sign-in => new repository 便可建立一个本身的项目。

上面都准备好后：切换到你当前姓名根目录下，接着执行一下命令，注意要先安装 git,git 下载

提交源码到 GitHub

• git init 【初始化】
• git add ./ 【添加，工做区到暂存区】
• git commit -m "first commit" 【提交，由暂存区到版本区】
• git remote add origin https://github.com/wqb2017/vu... 【远程添加到 github 项目中】
• git push -u origin master 【提交到对应版本】

生成线上可预览的项目

上面第三点【提交源码到 GitHub】完成后，接着如下内容

• 切换到 gh-pages 分支 git checkout -b gh-pages
• 执行 npm run build 命令，构建代码
• 将 dist 目录下的全部文件夹推送至远程仓库的 gh-pages 分支

执行如下命令

• 强制添加 dist 文件夹，由于.gitignore 文件中定义了忽略该文件

  git add -f dist

• 提交到本地暂存区

  git commit -m 'Initial the page of project'

• 部署 dist 目录下的代码

  git subtree push --prefix dist origin gh-pages

• 预览

  [github 用户名].github.io/[项目仓库名]

个人地址就是 :https://wqb2017.github.io/vue...

最后一步就是【发布到 npm 供其余人使用】

• 注册帐号

  传动门

• 登陆 npm 帐号

  npm login

• 发布项目到 npm

  npm publish

注意

解决使用 Vue-cli webpack 模板生成的 vue 项目，资源路径问题。出现上述问题应设置 config/index.js 中 build 对象下的 assetsPublicPath 字段为 assetsPublicPath: './'。