前言
再过几天一大批大学生就要投入到找工作的队伍当中,今年毕业生又是创历史新高--820 万。如何让自己在这么多人中脱颖而出?除了长期的基础积累外,额外的营销手法还是能给自己加加分的。
做软件开发的,或者说对做软件开发有兴趣的同学都会学习或者动手练习过项目,要么是跟着网站学、要么是对着书本网上看到的东西练习一遍,但是这些个做出来的东西我们应该如何展示出来,或者是让面试官看到?必定简历也就只是简单介绍自己,面试也只是个把时间,很难把自己会的东西都展示出来。
再者是浏览简历的时候要是看到你做过的作品和源码,其实对于面试官来说还是能加不少分的,必定看了你做过的东西基本上能看出很多表面上看不到的东西。
这个就是我接下来要讲的东西,利用 GitHub 来托管自己的源码和展示自己的产品,如果你正在找工作,那么也许对你可能有点帮助。。。
下面是利用 vue 实现页面满屏切换
主要功能点:
- 实现全屏定时轮播,轮播时间可设置
- 每屏页面内容可定制
- 每个屏都有对应的 key 可手动点击切换,并支持键盘切换
- key 背景和选中样式可定制
- 页面切换时动画效果可定制
- 封装成组件并发布到 npm
实现
- 首先我们用 vue 模板中的 webpack-simple来快速搭建一个 vue 项目,项目名就叫:vue-pages-toggle,具体搭建细节可看这里传送门
- 详细项目内容看这个vue-pages-toggle
- 效果图,在线demo
因为我们今天不是谈论怎么写这个插件的,这里就不做详细介绍了,回归到主题.
- 创建一个 GitHub 账号
- 在自己的 GitHub 上创建项目
- 提交源码到 GitHub
- 生成线上可预览的项目
- 发布到 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: './'。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。