If you're just getting started with this series of Vue.js posts, you should start with the Vue.js Starter Page.
Vue.js uses components to break down and separate functionality into specific files. Here's how:
<template>
<div>
<app-header></app-header>
<app-muscles></app-muscles>
<app-footer></app-footer>
</div>
</template>
<script>
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
import Muscles from './components/Muscles.vue';
export default {
components{
'app-header':Header;
'app-footer':Footer;
'app-muscles':Muscles;
},
name: 'app',
data () {
return {
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>