jrg-project-5
jrg-project-5 copied to clipboard
jirengu-inc
Hello Modules
#UI 预览在这里：https://jirengu-inc.github.io/jrg-project-5/resumer_mockups/index.html
继续我们的 resumer，这次不用新建目录。
上个教程里我们把页面分为三个大模块
- Topbar
- ResumeEditor （注意不是 ResumerEditor）
- 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
然后是重点，添加 SVG icon。
所有的 icon 可以在 这里下载
commit: 将所有 SVG 文件放到 static/svg_icons/ 下
接下来可能有点难以理解，我们要写一个脚本，这个脚本会把所有 SVG 文件拼成一个文件：
然后运行这个 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/ 那一行删掉！
思考题：把数组改为对象，在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。而数组是有序的，从而可以解决这个问题。最完整的答案是不是这个意思呢？
