2017-07-03 • 前端开发

Web 是时候用前端写个简历了!

最近感觉自己又好像处于瓶颈期了, 感觉就像是便秘一样的难受, 当然我从来没有便秘过, 就是一个说辞, 上一次又这种感觉还是在14年的时候, 那时候我还是在做空运关务的工作, 整天面对着的就是提单, 清关等杂事, 觉得总不能碌碌无为的混一辈子吧, 那时正值国内移动端开发的蓝海期, 看了当年WWDC大会的我毅然决然的投入了移动端开发的浪潮, 但是做了几年, 又有一种莫名的无力感逐渐的涌现, 不久感觉又要进行人生的选择了.

越来越发现自己是一个很丧的人, 虽然丧, 但是做事很积极什么事也没耽误, 你看, 说了那么多屁话, 现在应该进入本文的主题了, 今天我们就来手把手完成自己的H5简历. 其实我也不知道现在企业对于H5的招工标准是什么, HTML, CSS, JS, JQuery, Bootstrap, Angluar.js, Node.js, Vue.js, React Native, Webpack, Less, 什么之类的, 上述可能有拼写错误, 但这都不重要, 你指出了我也不会特意更改, 在搭建我们的H5简历之前, 我们需要了解一下前端是什么.

所谓前端就是浏览器打开的网页, 够通俗易懂吧, HTML, 表示语义, 你可以全部使用一个标签达到几乎所有的效果, CSS, 层叠样式表, 选择器什么的真是傻的要死, 可维护性真低, 所以有人看不下去制作了Less之类的预编译, 其实就是代码生成器, 尼玛又不是原生的亲儿子能强到哪去, 接下来说JS, 学JS可以看阮一峰的教程, 写的很好, 顺便看下ES6和ES7, 还可以看看你不知道的JS, 但是习惯了Xcode上敲代码, 再看JS这种语言, 诶….

说完HTML, CSS, JS三兄弟, 我们就来说说现今流行的前端框架, Angluar, React, Vue, 你也不用知道怎么选, 选哪个, 除了Vue用的比较顺手些之外, 其他的真是大厂的风范, 但你只是框架, 又不是平台, 做那么重有X用啊! 面试还要会JQuery, Bootstrap, JQuery这种已经过时了吧, 难道是维护旧项目? 可以看锋利的JQuery, 这种书两个小时就看完了, Bootstrap, 呵呵响应式布局, 企业是有多缺钱的才会用这种爹不疼娘不爱的框架, 栅格布局什么的, 我很不喜欢. 作为iOS开发的我, 写代码最不喜欢的就是使用第三方的东西了, 现在我的项目中除了AFN和SDW这种神框架用用之外, 其他的呵呵, 内存泄漏你都不看,还放在github上好多star, 买买提~

诶…. 越说越离谱了, 看到这里肯定好多人点了左上角x号了吧, 以上言论纯属酒后胡言, 我们正式进入代码阶段. 我们使用Vue作为我们的前端框架.

我们通过Vue官方的cli 快速搭建项目

这样我们就生成了一个Vue的项目. 打开就能看到Vue默认启动页. 那就说明你已经成功的开发了一个前端的项目了, 我们需要注意的是package.json这个文件, 其实这是一个NPM包管理工具, 现在也可以用Yarn来代替, 和CocoaPods是一个东西, 但我不喜欢CocoaPods, 而倾向于Swift Package Manager, 虽然还不支持iOS, 但第三方的大多数都是垃圾, 包括我写的代码.

就像学习iOS开发要从main函数开始, Vue我们要从index.html开始:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Resume - coderZsq</title>
</head>

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

没学过前端的同学不用担心, 前端的代码就是渣渣, 因为语言太渣, 所以大神就多, 因为把那么渣的语言用的出神入化, 绝对就是大神的级别了, 但从长期来看, 前端这种东西的淘汰是毋庸置疑的, 别看现在那么火, 需求量那么大, 泡沫罢了… 所以学个大概就差不多了, 二八理论就可以了, 就当学习了历史吧…

<!DOCTYPE html> 我也忘了术语叫啥了, 这都不重要, 看到这样的就是HTML5的代码, 用来让浏览器区别XHTML, 和之前更渣版本用的, 没啥用, 接下来就是<html>标签, 在html标签内的代码才能够被浏览器解析, 就是用来让浏览器区分网页和垃圾用的. <head>标签, 就是关于你项目的设置, 其中的<meta charset="utf-8">设置字符集, <title>Resume - coderZsq</title>设置网页标题, 一般还放一些css或js配置, 及一些SEO搜索优化之类的, 网上一搜一大把.我们的所有代码就是放在<body>标签里的, body内部有一个绑定了id等于app的div ` <div id="app"></div>`, 你问我div是什么意思, 呵呵我也不知道, 就当是一个空的View吧.

接下来我们来看main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

上面的import不用看, 额, 还是看一下吧, 第一个Vue, 看得出是一个Vue对象, App, 是一个vue的组件, router, 是路由, 可能移动端的同学对路由陌生, 就把他想成push, pop的导航控制器吧. 再看下面的代码, 一条配置信息, 忽略他, 再下面, 实例化了一个Vue对象, el钩子绑定id为app的div. 细节不用了解, 只要知道这些代码是用来将id等于app的div做成单页应用的背后逻辑. 就像ReactNative一样, 都是在单个View上做逻辑.

接着我们来看看绑定的App.vue:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  margin: 0;
  padding: 0;
}
</style>

我修改了一些上述的代码, 但不重要, 我们看一个vue组件是通过<template>, <script>, <style>三个标签组合形成的, template就是模板, 放置一些html的代码, 后面两个就不多说了吗放置.css和.js, 一个vue组件就将整个页面所需要的元素全部放置在一起了. 我在css中将边距清零, 这里就要你先去W3C了解下盒子模型的感念了, 我不可能讲那么细节的东西.

再来看router/index.js:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(Router)
Vue.use(ElementUI)

export default new Router({
  routes: [{
    path: '/',
    name: 'Home',
    component: Home
  }]
})

这里是用来配置路由用的. 在这里引入饿了么的UI组件, 前端都是三方的组件, 所以我虽然不喜欢, 但也没办吧不是吗? 官网链接

npm 安装

官网是在main.js中引入, 这都不重要, 想改就改下, 不想改也没有关系, 都是一样的.

大致就说的差不多了, 可以开始写项目代码了, 如果想要了解webpack的代码, 也可自行了解, 也是很重要的一块.

我们将内置的Hello.vue改成Home.vue, 并清空代码:

<template>
</template>

<script>
export default {}
</script>

<style scoped>
</style>

一个vue通过三个不同的元素构成, 由于是单页应用, css需要通过scoped关键字区分, 这点很重要, 不然样式会串.

没学过设计的我要设计一个好看的网页也是挺难得一件事情, 所以我及找了喵神的简历用来参考, 想必喵神不会和我这种小白计较吧.

我们先实现导航栏, 从饿了么的组件中找到导航栏把代码复制下来:

修改下代码, 变成我们想要的样子:

  <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-menu-item index="1">Resume - coderZsq</el-menu-item>
    <div class="items">
      <el-menu-item index="2"><a href="#" target="_blank">Home</a></el-menu-item>
      <el-menu-item index="3"><a href="#" target="_blank">Project</a></el-menu-item>
      <el-menu-item index="4"><a href="#" target="_blank">Blog</a></el-menu-item>
      <el-menu-item index="5"><a href="#" target="_blank">GitHub</a></el-menu-item>
      <el-menu-item index="6"><a href="#" target="_blank">Experience</a></el-menu-item>
      <el-menu-item index="7"><a href="#" target="_blank">Contact</a></el-menu-item>
    </div>
  </el-menu>
  <div class="nav-offset"></div>

.el-menu {
  padding-left: 15%;
  padding-right: 15%;
  width: 70%;
  position: fixed;
  height: 60px;
}

.nav-offset {
  height: 60px;
}

.items {
  float: right;
}

如果不了解css, 去看下W3C的教程, 其实就是一些属性, 2个小时就能看个大概, 其中el-menu是一个class, 可以通过Chrome审查元素得知:

效果图

接着我们来实现左边的头像这部分, 我们需要将这块分组, 代码如下:

  <div class="odd">
    <div class="content">
      <div class="profile">
        ![](../assets/logo.png)
        <div class="name">Shuang quan</div>
        <div class="job">iOS Developer</div>
        <div class="nickname">Castie! (@coderZsq)</div>
        <div class="social"></div>
      </div>
    </div>
  </div>

.even {
  width: 100%;
  height: 600px;
  background-color: rgba(248, 248, 248, 1);
}

.odd {
  width: 100%;
  height: 600px;
  background-color: white;
}

.content {
  margin-left: 15%;
  margin-right: 15%;
  height: inherit;
}

.profile {
  padding-top: 10%;
  width: 30%;
  text-align: center;
  height: inherit;
  background-color: rgba(248, 248, 248, 1);
}

.profile img {
  width: 90%;
  padding-left: 5%;
}

.profile .name {
  text-align: inherit;
  font-size: 28px;
}

.profile .job {
  text-align: inherit;
  font-size: 20px;
  color: lightgray;
}

.profile .nickname {
  text-align: inherit;
  font-size: 24px;
  color: rgba(1, 149, 235, 1);
}

.profile .social {
  background-color: rgba(1, 149, 235, 1);
  width: 100%;
  height: 40px;
}

其实不用翻W3C应该也能看个大概吧, 前端很容易的. 累了, 今天就到这里吧. 看下今天的最终效果:

难看是难看了些, 这不是第一天嘛, 还有改进的空间.

慌慌张张, 匆匆忙忙, 2017已经进入下半年, 按照计划7月应该到了用H5写简历的时候了, 感觉和目前的躁动期不谋而合, 但说实在的也不是工资的原因(虽然薪水方面不达标也是事实), 但真的是代码敲的有点无趣了, 懒得我做项目都用生成器和组件了, 再加上复制黏贴神技, 基本可以覆盖80%的工作. 如果没有看过我之前的文章, 在此把快速开发工具分享给你 –> OC 项目开发工具

对于Swift的学习也进行了很久了, 从onevcat的100tips到raywenderlich的书籍, 接下来就应该看objc.io的书了吧, 服务端的Swift也非常的火, 还有对于前端, 一直在用Vue, 新出的Angluar4也没时间看, 也不想看, 对于后端, 看了Python但感觉处理数据更加适用, 缩进的语法和Elint一样真是闲的蛋疼, Node.js 方面用了Koa, 比起Express是简洁不少, 还有小程序, 但然并卵, 感觉在AWS下, 后端好多都是呵呵的, 以长远眼光来看, 技术栈的更新是以指数级增长的, 所以还是精通语言本身比较有意思, 而不是一些属性和方法, 个人感觉最应该掌握的就是, 设计模式, 数据结构及算法. 想要学习raywenderlich但看不懂英文的朋友可以看我的文章学习 –> Swift 学习

About:

点击下方链接跳转!!

🌟 源码请点这里🌟 »> 喜欢的朋友请点喜欢 »> 下载源码的同学请送下小星星 »> 有闲钱的壕们可以进行打赏 »> 小弟会尽快推出更好的文章和大家分享 »> 你的激励就是我的动力!!

Castie!

Web 是时候用前端写个简历了!

About:

Web 前端项目要从基本布局开始

iOS 核心动画的应用及内存泄漏