jrg-project-5
jrg-project-5 copied to clipboard
jirengu-inc
一个在线简历编辑器教程。
首先新建项目目录 ``` cp -r step-2 step-3 ``` 这样我们就可以基于之前的代码做新任务，同时不改动之前的代码。 # 学会一个框架的最好办法 学会一个框架的最好办法那就是——做毁一个项目。 接下来我们就要用 Vue.js 做一个待办事项小应用。简单起见，我们就不写 CSS 了，只用 HTML 和 JS 搞定。 我们的目标只有一个，就是搞清楚怎样用 Vue.js 进行开发。 # 需求 这个项目的英文名就暂定为 Todo，它有以下功能： 1. 用户可以新建一个待办事项 2....
My Project
# 需求分析 你首先得知道你要做什么，你才能开始做。 ## 项目目标 做一个工具，用户可以用这个工具来写简历 ## 功能列表 1. 添加简历内容，包括个人信息、工作经历、学习经历、获奖情况、项目经历和联系方式。 2. 更新简历内容 3. 选择简历模板 4. 预览简历 5. 发布简历 # 原型图 我们需要画出一个基本的图片，来描述我们的页面是什么样子：  # 分模块/分区 我们大概将页面分为几个模块，化整为零，分别开发：  每一个区块的内容都不太复杂： 1. 顶栏。包含 logo...
# Webpack 我学新东西的套路就是： 「copy - run - modify」 「抄 - 运行 - 修改」 1. 抄文档给的例子 2. 在自己这里运行成功 3. 改一下，看还能不能运行成功 我们学 Webpack 也遵循同样的套路。 # 安装 我们要使用 npm 来安装 webpack。 1. 为了让你更了解...
No Backend!
```bash cp -r step-3 step-4 cd step-4 webpack --watch #然后新开窗口写代码，这个不要关 ``` # 我们需要一台服务器吗？ 上个任务中，我们的数据存在 localStorage 中，这样有很多弊端： 1. 如果用户清空缓存，那么 todoList 就没了…… 2. 如果用户换一台电脑，那么 todoList 也看不见了…… 所以，我们是不是应该买一台服务器来存所有用户的数据？ 可以，但是服务器是要钱的，我们现在还没必要花这个钱。 # No Backend（无后台） 没有服务器能不能存数据呢？...
添加更多细节
# 将用户数据保存到 LeanCloud > [删除「保存」和「预览」按钮](https://github.com/jirengu-inc/jrg-project-5/commit/9d57439c07fd3ff4b3e1553476ac7e63ae3a280a) > 1. 实时保存，因此不需要用户点保存 > 2. 预览按钮讲移到其他地方 > [删除所有假数据](https://github.com/jirengu-inc/jrg-project-5/commit/1a9f4c8018881ebd2723455c277d4f68147a8d42) 然后打开开发者工具，把 localStorage 也清空：  然后刷新页面，页面上的数据就空了：  接下来我们有三个功能要完成： 1. 输入框上面显示中文，而不是英文 2. 如果用户啥也没填，就不要展示 3. 用户可以自行添加工作经历、教育经历等 然而老司机我思考了一下，我们好像遇到了一点问题。 我们如何判断用户没有填工作经历呢？ 可以看 workHistory...
#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](https://github.com/vuejs-templates/webpack) 的文档 [Pre-Processors](http://vuejs-templates.github.io/webpack/pre-processors.html) 章节的 [示例](http://vuejs-templates.github.io/webpack/pre-processors.html) 即可：...
单向数据流
简单来说，把一切双向绑定的语法都禁用，同时只在一个地方改动数据，那么留下来的就是单向数据流。 由于代码越来越琐碎，所以大家看 commit 要更加仔细了。 我会在 commit **下面的评论框** 里写出主要思路。 1. commit [使用 Vuex 思想重构](https://github.com/jirengu-inc/jrg-project-5/commit/bfe17bfb2aecc6d34853961afe3fdf3176f726d6) 2. commit [使所有字段都可以编辑](https://github.com/jirengu-inc/jrg-project-5/commit/a43e50378564f30c5450447926ae8d07a582ad6a) 3. commit [数据保存到 localStorage](https://github.com/jirengu-inc/jrg-project-5/commit/71e04f747a53bb004e6b56b574406186324c23ee) 至此，不管里怎么刷新页面，就跟刷新页面之前一样了。 接下来我们添加注册和登录。 > commit [添加注册对话框](https://github.com/jirengu-inc/jrg-project-5/commit/f5ca1b605db48cb4e2784e6ed2896fb7e8bcb9a7) 写完这一步，你要理解为什么点击「注册」按钮，就会弹出一个 Dialog，一定要看懂。 > commit [使用...
数据！数据！
接下来我们来做预览功能。 首先想一个问题： > ResumePreview 的数据（data）从哪来？ 当然是从 ResumeEditor 来，对吧。 > 怎么拿到数据呢？ **方案一：** 那么最傻的办法就是在 ResumePreview 里面去读 ResumeEditor 的 data。 这种办法可以是可以，但是有一个「耦合性」太高的问题。 假设 ResumePreview 代码是这样的： ``` export default { name: 'ResumePreview', data: function(){ return...
No Backend 2
```bash cp -r step-4 step-5 cd step-5 # 如果是 Windows 系统，再执行下面两行 rm -rf node_modules npm i # 结束 Windows 系统的命令 webpack --watch # 然后新开一个窗口 ``` # 数据关联 之前一个任务，虽然我们应该支持注册和登录了，但是用户的数据依然存在于 localStorage，这个任务我们将把数据存到用户名下，也就是让数据与用户关联（associate）起来。 这次任务与之前的任务有一个不同点，那就是我们尝试一些错误的方法。（尝试之后才发现是错的）...
这是最后一个任务： 1. 把之前的代码都删掉 2. 自己试着写出来 3. 添加好看的 CSS 样式，参考 https://dribbble.com/search?q=resume 优秀作品： https://luosijie.github.io/vue-resume/#/ http://spar.coding.me/ https://kumabearplus.github.io/webpack/demo7/dist/#/ https://shaozhiyuan.github.io/resume/dist/index.html#/ https://kmac007.github.io/vue-resume/dist/#/ https://incuisting.github.io/resumer-maker/dist/ http://imgwho.cc/jirengu/vue10-vuex4/dist/index.html#/