可以在线编写简历，包括个人信息、工作经历、教育背景、项目经历、获奖情况以及联系方式。在编辑完成后可进行预览。
预览链接：预览
- 编辑简历
- 预览简历
Vue/SCSS/Element-UI/LeanCloud/Vuex/Vue-Router
采用SCSS以及Element-UI编写CSS。
使用vue-cli搭建环境，后端数据使用LeanCloud。
为了组件间通信使用了Vuex。
为了预览功能轻量使用了Vue-Router。
// clone 项目至本地
git clone https://github.com/xmxshr/vue-resume-editor.git
// 进入项目文件夹
cd vue-resume-editor
// 安装依赖
npm i
// 运行项目
npm run dev
个人信息、联系方式的数据类型是Object：
profile: {
name: "张二狗",
birth: "1995.06",
city: "火星",
for: "前端工程师",
},
contact: {
qq: "2233421",
wechat: "22352",
phone: "13412345678",
email: "[email protected]",
}
项目经历、工作经历、教育背景、获奖情况的数据类型是Array：
workExperience: [{
time: "2011.04-2011.08",
company: "火星探索有限公司",
content: "公司总部设在XXXX区，先后在北京、上海成立分公司。专注于移动XXX领域，主打产品XXXXX，它将资讯、报纸、杂志、图片、微信等众多内容，按照用户意愿聚合到一起，实现深度个性化定制。",
}, {
time: "2010.10-2011.03",
company: "月球探索有限公司",
content: "公司总部设在XXXX区，先后在北京、上海成立分公司。专注于移动XXX领域，主打产品XXXXX，它将资讯、报纸、杂志、图片、微信等众多内容，按照用户意愿聚合到一起，实现深度个性化定制。",
}],
这样的数据类型能够更好更方便的修改数据，看起来更加直观。并且也分别写了两个组件ArrayEditor、ObjectEditor来展示、修改数据。
因为是两个组件之间的通信，并且为了学习使用，就选择了Vuex。
需要注意的是：修改store中的状态的唯一方法是提交mutation。
mutation就像事件一般，需要一个事件类型（一个字符串类型的名字）和一个回调函数（第一个参数是state）。
项目中删除一条数据是这样的：
removeItem(item, index) {
this.$store.commit('removeItem', {
item, index
});
}
在store中是这样写的：
removeItem(state, {item, index}) {
state.resume[item].splice(index, 1);
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent