H5 是時候用前端寫個簡歷了！

最近感覺自己又好像處於瓶頸期了, 感覺就像是便秘一樣的難受, 當然我從來沒有便秘過, 就是一個說辭, 上一次又這種感覺還是在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開始:

Resume - coderZsq

沒學過前端的同學不用擔心, 前端的代碼就是渣渣, 因為語言太渣, 所以大神就多, 因為把那麼渣的語言用的出神入化, 絕對就是大神的級別了, 但從長期來看, 前端這種東西的淘汰是毋庸置疑的, 別看現在那麼火, 需求量那麼大, 泡沫罷了... 所以學個大概就差不多了, 二八理論就可以了, 就當學習了歷史吧...

我也忘了術語叫啥了, 這都不重要, 看到這樣的就是HTML5的代碼, 用來讓瀏覽器區別XHTML, 和之前更渣版本用的, 沒啥用, 接下來就是

標籤, 在html標籤內的代碼才能夠被瀏覽器解析, 就是用來讓瀏覽器區分網頁和垃圾用的.

標籤, 就是關於你項目的設置, 其中的

設置字符集,

Resume - coderZsq

設置網頁標題, 一般還放一些css或js配置, 及一些SEO搜索優化之類的, 網上一搜一大把.我們的所有代碼就是放在

標籤里的, body內部有一個綁定了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: "",

components: { App }

})

上面的import不用看, 額, 還是看一下吧, 第一個Vue, 看得出是一個Vue對象, App, 是一個vue的組件, router, 是路由, 可能移動端的同學對路由陌生, 就把他想成push, pop的導航控制器吧. 再看下面的代碼, 一條配置信息, 忽略他, 再下面, 實例化了一個Vue對象, el鉤子綁定id為app的div. 細節不用了解, 只要知道這些代碼是用來將id等於app的div做成單頁應用的背後邏輯. 就像ReactNative一樣, 都是在單個View上做邏輯.

接著我們來看看綁定的App.vue:

一個vue通過三個不同的元素構成, 由於是單頁應用, css需要通過scoped關鍵字區分, 這點很重要, 不然樣式會串.

沒學過設計的我要設計一個好看的網頁也是挺難得一件事情, 所以我及找了喵神的簡歷用來參考, 想必喵神不會和我這種小白計較吧.

我們先實現導航欄, 從餓了么的組件中找到導航欄把代碼複製下來:

修改下代碼, 變成我們想要的樣子:

Resume - coderZsq

Home

Project

Blog

GitHub

Experience

Contact

.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審查元素得知:

效果圖

接著 我們來實現左邊的頭像這部分, 我們需要將這塊分組, 代碼如下:


Shuang quan

iOS Developer

Castie! (@coderZsq)

.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下, 後端好多都是呵呵的, 以長遠眼光來看, 技術棧的更新是以指數級增長的, 所以還是精通語言本身比較有意思, 而不是一些屬性和方法, 個人感覺最應該掌握的就是, 設計模式, 數據結構及演算法.

想要系統學習web前端和免費學習資料的 可以加裙六二三九六六八零六

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！