Vue.js+muse-ui Production online Resume editor __js

implement an online personal resume editor, achieve online editing, generate resume images, apply technology:

1.vue.js
2.webpack
3.muse-ui (Https://museui.github.io)
4.html2canvas.js (used to generate HTML images); The project directory that has been developed is as follows:

and then the overall effect of my resume

(using the idea of components, where each module is a component, some modules, like, can be further improved, here I do not) one. Build Vue project

First use VUE-CLI to build our project, no use of students can go to see my previous blog, there is a special introduction to two. Introduction of Muse-ui

Under the project directory, install the Muse-ui

Nam Install Muse-ui--save-dev

Introduced in the Main.js

Import Museui from ' Muse-ui ';
Import '.. /static/css/muse-ui.css ';
Import '.. /static/css/theme-carbon.css '//Use carbon theme (can be changed)
Vue.use (Museui)

If you want to use Muse-ui's own icon, introduce two files in index.html:

<link rel= "stylesheet" href= "Https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" >
    <link rel= "stylesheet" href= "Https://fonts.googleapis.com/icon?family=Material+Icons" >

This can be replicated in the Muse-ui official online example to play, online many muse-ui tutorials are more complex, here I use the simplest way to achieve, here do not do a demo, interested students can go to try. three. Avatar Module Headerimg.vue

<template> <div class= "headerimg" >  <input type= "File" class= "File-button" @change = "Onfilechange"/> </div> </template> <STYLE&G
            t;</style> <script> Export default{data () {return {images:[], Pictureurl: '.. /..
            /static/img/headerimg.jpg '}}, methods:{Test () {var VM = this Console.log (Vm.message)}, Onfilechange (e) {var files = E.target.files | | e.datatransfer . files if (!files.length) return var _this = this var reader = null reader = new W Indow. FileReader () Reader.readasdataurl (files[0]) Reader.onload = function (e) {_this.pictureur L = E.target.result}},}, </script> 

Four. Personal Information module (written in Home.vue)

<div class= "Baseinfo" >
              <mu-text-field hinttext= "input Age" type= "type" icon= "Face" fullwidth:underlineshow= "False"/>
              <mu-text-field hinttext= "Enter Address" type= "type" icon= "Place" fullwidth:underlineshow= "false"/>
              <mu-text-field hinttext= "Enter phone number" type= "type" icon= "Phone" fullwidth:underlineshow= "false"/>
              < Mu-text-field hinttext= "Enter Mailbox" type= "type" icon= "Mail" fullwidth:underlineshow= "false"/>
          </div>

five. Skill characteristic module

<template> <div class= "skills" > <div class= "title" > <span class= "" > Technical features </span> A href= "javascrpt:;" class= "add addbtn" @click = "OpenSkills" > <mu-icon value= "Add" color= "#fff"/> < /a> </div> <div> <mu-dialog:open= "Skillsdialog" title= "skills characteristics" @close = "Closeskills" > &L T;mu-text-field label= "Mastered technology" Labelfloat fullwidth v-model= "Skill.name"/> <mu-row gutter>  L width= "table=" "desktop=" > <mu-slider v-model= "skill.value" class= "Demo-slider": min=0:max=100 : step= "5"/> </mu-col> <mu-col width= "A" table= "a" desktop= "> <span&gt" ; {{skill.value}}</span> <span>/</span> <span>100</span> </
      mu-col> </mu-row> <mu-flat-button slot= "actions" @click = "closeskills" primary label= "Cancel"/> <mu-flat-button slot= "actions" primary label= "OK" @click = "Skilldata"/> </mu-dialog> </div> <div class= "Skill-it"  Em "> <div v-if=" skillempty "class=" EMPTY "> Please add a skill feature </div> <div v-for=" (item,index) in skills " class= "List" v-else> <p> <span>{{item.name}}</span> <a href= "Javascri
        PT:; "class=" delete "@click =" Deleteskill (index) "> <mu-icon value=" delete "/> </a> </p> <mu-linear-progress mode= "determinate": value= "Item.value"/> </div> &LT;/DIV&G
T
      </div> </template> <style></style> <script> Export Default {data () {return { Value:20, Skillsdialog:false, skill:{name: "", value:0}, skills:[], Skil
      Lempty:true,}}, methods: {OpenSkills () {This.skillsdialog = true}, Closeskills () { This.skillsdialog = False}, Skilldata () {This.skills.push (This.skill);
        this.skill={name: "", value:0};
        This.skillsdialog = false;
        This.skillempty = false;
      Console.log (This.skills)}, Deleteskill (index) {this.skills.splice (index,1);
      if (this.interests==0) {this.interestempty = true; {}}}} </script>

Six. Education Background module (EDUCATION.VUE)

<template> <div class= "Education" > <div class= "title" > <mu-icon value= "School  "Color=" #1d3653 "/> <span> educational background </span> </div> <mu-float-button icon=" Add " Mini class= "Demo-float-button educationbtn" @click = "openeducation"/> <mu-dialog:open= "Educationdialog" title= "educational background" @close = "closeeducation" > <mu-row gutter> <mu-col "Width=" "Desktop=" > <mu-date-picker mode= "Landscape" hinttext= "Start Time" Fullwidth v-model= "Edu.starttim
                  E "/> </mu-col> <mu-col width=" table= "desktop=" > <mu-date-picker mode= "Landscape" hinttext= "End Time" Fullwidth v-model= "Edu.endtime"/> &LT;/MU-COL&G
                T <mu-col width= "table=" desktop= "> <mu-text-field hinttext=" graduated school "Fullwidth V-model=" E Du.scHool "/> </mu-col> <mu-col width=" table= "" desktop= ">
              <mu-text-field hinttext= "professional skills" Fullwidth v-model= "edu.professional"/> </mu-col> </mu-row> <mu-row gutter> <mu-col width= "table=" 100 "> <mu-text-field hinttext=" Enter educational background Details "multiline:rows=" 1 ": rowsmax=" 5 "Fullwidth v-model=" Edu.con Tent "/> </mu-col> </mu-row> <mu-flat-button slot=" Actions "@c lick= "Closeeducation" primary label= "close"/> <mu-flat-button slot= "actions" primary label= "determine" @click = "Ed UData "/> </mu-dialog> <div class=" education-content lists "> <div v-i
                  f= "Empty" class= "EMPTY" > Please add educational background </div> <div v-for= "(item,index) in Edus" class= "list" v-else> <mu-row gutter> <mu-col width= "table=" desktop= "> <span C" lass= "Title-font" >{{item.startTime}}</span> <span class= "Title-font" >--</span&gt
                        ; <span class= "Title-font" >{{item.endTime}}</span> </mu-col> & Lt;mu-col width= "table=" "desktop=" > <span class= "Title-font" >{{item.school}}&lt
                        ;/span> </mu-col> <mu-col width= "table=" desktop= ">" <span class= "Title-font" >{{item.professional}}</span> </mu-col > <mu-col width= "table=" 5 "desktop=" "> <a href=" javascript :; "class=" deletebtn "@click =" DeleteData (index) "> <mu-icon value=" delete "color=" #fff " /> </a> </mu-col> </mu-row>
                      <mu-row gutter> <mu-col width= "table=" desktop= ">"
                <span class= "Content-font" >{{item.content}}</span> </mu-col> </mu-row> </div> </div> </div> </template> <style>< /style> <script> Export default{data () {return {educationdialog: