Hello Modules

[FrankFang]

UI 预览在这里：https://jirengu-inc.github.io/jrg-project-5/resumer_mockups/index.html

继续我们的 resumer，这次不用新建目录。

上个教程里我们把页面分为三个大模块

1. Topbar
2. ResumeEditor （注意不是 ResumerEditor）
3. ResumePreview

今天我们逐个完善。

LESS / SCSS / Stylus

之前我们写的样式都是 CSS，现在我们想加上 CSS 预处理怎么办呢？很简单，抄 vuejs-templates/webpack 的文档 Pre-Processors 章节的 示例 即可：

为了让 node-sass 顺利安装，请在先在命令运行

export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"

然后

npm install --save  sass-loader node-sass

commit: Refactor: Use scss

我怎么知道要安装 sass-loader node-sass 呢？因为不装就报错了，你可以试试先不装 sass-loader node-sass 会怎样。

你见的 bug 越多，你改 bug 就改得越快。

上面用的是 SCSS，如果你喜欢 Stylus / LESS，请自行摸索。

同理，如果你要使用其他预编译的 HTML 或 JS，都可以做到，看上面的文档操作。

更多 HTML 和 CSS

Topbar

commit: 添加两个按钮

ResumeEditor

先写基本 HTML、CSS

commit: 添加左侧导航 commit: tab 切换

然后是重点，添加 SVG icon。

所有的 icon 可以在 这里下载

commit: 将所有 SVG 文件放到 static/svg_icons/ 下

接下来可能有点难以理解，我们要写一个脚本，这个脚本会把所有 SVG 文件拼成一个文件：

commit: 使用脚本将所有 svg 拼成一个 svg，原来的多个 svg 变成了多个 symbol

然后运行这个 node build/svg-symbols.js 脚本，得到 src/assets/icons.js

commit: 运行 node build/svg-symbols.js

最后讲 SVG Symbols 插入到页面里

commit: 将 SVG 插入 body 中

添加 SVG icon 结束。页面效果如下：

看到 body 下面的 svg 标签了么。

那么如何使用这些 SVG icon 呢？

简要说明一下，只要在页面任意地方使用

<svg>
  <use xlink:href="#icon-xxx"></use>
</svg>

就可以展示 id 为 icon-xxx 的图标了。

那么，开始使用 SVG icon 吧：

commit: bio 重命名为 profile commit: 将 visibleItems 改为 config commit: 使用 SVG 图标

效果：

思考题

ResumeEditor 的 data 中，为什么我要用 config 数组？去掉 config 数组，改成

resume: {
      profile: {
        icon: 'xxx',
        name: '',
        city: '',
        title: ''
      },
      'work history': { icon: 'xxx',  items: [] },
      education: { icon: 'xxx',  items: [] },
      projects: { icon: 'xxx',  items: [] },
      awards: { icon: 'xxx',  items: [] },
      contacts: { icon: 'xxx',  items: [] },
    }

行不行？为什么？

接下来完善 panels：

commit: 显示第一个 panel 的内容

然后给第2个 panel 加点数据看效果：

          'work history': [
            {company: 'AL', content: '我的第二份工作是'},
            {company: 'TX', content: '我的第一份工作是'},
          ],

效果令人激动：

由于 work history 属性是个数组，所以我们要判断一下数据类型：

commit: resume 属性同时支持数组和对象

预览：

好了已经写了很多代码了，今天就到这里。

致饥人谷学员

完成 https://jirengu-inc.github.io/jrg-project-5/resumer/dist/ 一样的效果。

部署前记得把 resumer/.gitignore 里面的 dist/ 那一行删掉！

[TerenYeung]

yjl for vue-resume-generator of 2nd commit source demo

[Zegendary]

使用stylus预处理器 page code

[starlikerain]

分手后的狗头同学

---

预览

源码

[hungryYang]

page code

[JaeJiang]

页面 代码 姜杭轩 Josh

[raszxcv]

预览 仓库 火

[ReedSun]

预览 代码 SHZ 思考题：当然不行，数组是有序的，对象无序，可能会导致导航栏的顺序不是设计稿上的顺序。

[LisaLi85]

预览 代码 LLL

[wlf1112]

预览 代码 WLF

[have-not-BUG]

预览地址 代码 LC

[WangXiaoyugg]

预览 代码 WXY

[Rice-F]

预览 代码 SJ

[Hsyneve]

预览 源 HSY

[muxi7]

预览地址

代码

ZW

[code-zhangrui]

预览 代码

任务10班 张睿

[wuhanjun]

预览 代码

[zhangjiuyi]

预览 代码

ZJY

[lzm320856]

预览 代码

[xiaokunxu]

预览 代码 XXK

[candy252324]

预览 代码 CJH

[baixiaoji]

//使用 less 预处理器 代码 预览

[ab690257072]

思考题：遍历对象无序，无法保证顺序 预览 代码 ZLQ

[Anticlimax]

预览 代码 任务10班 李杨

[JeromeYangtao]

代码 预览

[superDCF]

思考题：把数组改为对象，在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。而数组是有序的，从而可以解决这个问题。最完整的答案是不是这个意思呢？

预览 代码

[n313893254]

预览 代码

[success-cg]

完善resumeEditor demo

[kumabearplus]

预览 代码

[Honohonoho]

预览 代码

[boloog]

预览 源码

[komolei]

预览 源码

[selectyang]

预览 代码

[robbchan]

预览 代码

[imgwho]

预览 代码

[forsuccess]

预览

[HuangHongRui]

Code Show :1st_place_medal:

[andreaxiang]

预览地址

[tcitds1]

预览

[zhuyutrisla]

预览

[huoguozhang]

预览 代码

[clementlxd]

代码 https://github.com/clementlxd/reusme 预览 https://clementlxd.github.io/reusme/dist/index.html#/

[Alfred-ZF]

预览 代码

[blackhu0804]

预览 代码