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

Source: Internet
Author: User
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:  

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.