CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Duoro
Duoro

Reputation: 308

Convert index.html to complete Vue CLI structure

I created this app to calculate cube of a number and then cube of the individual elements of the output. I created this Vue js project in JS Fiddle to learn the basics of Vue. But I want to move to complete Vue CLI project. I installed Vue.js in my computer but I can't figure out how to port this single file index.html into the different files in Vue CLI project (App.vue, HelloWorld.vue, main.js). Can anyone tell me how exactly to convert this single page file to the actual project files.

<div id="cubed">
  <input v-model='mainNumber' placeholder='Enter a number.'>
  <button v-on:click="cube">Submit</button>
  <p>
    Cube of the number is: {{ this.result }} <br>
  </p>
 <table id="table">
 <tr v-for="row in 2" :key="item">
   <td v-for="item in result" v-text="row > 1 ? cubeInt(item) : item"></td>
 </tr>
 </table>
</div>


#table {
  border-collapse: collapse;
  width: 50%;
  text-align: center;
}

#table td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#table tr:nth-child(even){background-color: #f2f2f2;}

#table tr:hover {background-color: #ddd;}

new Vue({
  el: "#cubed",
  data: {
    mainNumber: null,
    result: null
  },
  methods: {
    cubeInt: function(int) {
     return int*int*int
    },
    cube: function(event){
      var allowedInput = /^[0-9]/;
      if (this.mainNumber.match(allowedInput)){
        let calc = this.cubeInt(this.mainNumber);
        let strToNum = calc.toString().split('').map(Number);
        this.result = strToNum
      } else {
            alert('Only digits are allowed.');
        }
    },
    }
})

Upvotes: 0

Views: 463

Answers (1)

procoib
procoib

Reputation: 487

So using the Vue cli we have vue files, each file has a

  • template
  • script
  • style (optional)

I recommend checking out: The Project Anatomy section of this site:

And checkout some tutorials from netninja on youtube, they're really helpful!

If you want to get it working now, but are stuck on importing components etc, as a test, replace and save the HelloWorld.vue file with below your below vue format code:

<template>
<div id="cubed">
  <input v-model='mainNumber' placeholder='Enter a number.'>
  <button v-on:click="cube">Submit</button>
  <p>
    Cube of the number is: {{ this.result }} <br>
  </p>
 <table id="table">
 <tr v-for="row in 2" :key="item">
   <td v-for="item in result" v-text="row > 1 ? cubeInt(item) : item"></td>
 </tr>
 </table>
</div>
</template>

<script>
export default {
  name: "HelloWorld",
  data: {
    mainNumber: null,
    result: null
  },
  methods: {
    cubeInt: function(int) {
     return int*int*int
    },
    cube: function(event){
      var allowedInput = /^[0-9]/;
      if (this.mainNumber.match(allowedInput)){
        let calc = this.cubeInt(this.mainNumber);
        let strToNum = calc.toString().split('').map(Number);
        this.result = strToNum
      } else {
            alert('Only digits are allowed.');
        }
    },
    }
}
</script>

<style scoped>
#table {
  border-collapse: collapse;
  width: 50%;
  text-align: center;
}

#table td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#table tr:nth-child(even){background-color: #f2f2f2;}

#table tr:hover {background-color: #ddd;}
</style>

Upvotes: 1

Related Questions