3

前言

再过几天一大批大学生就要投入到找工作的队伍当中,今年毕业生又是创历史新高--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: './'。


sanyang
483 声望10 粉丝

sanyang