Organize + Automate + Deploy = Webpack Chapter 16Once the project is created, you can install the dependencies with npm install, just as in
the console output.
Inside the project, let's create the joke button component. Inside the component folder, you
will find a Test.vue component; rename it to JokeButton.vue and make it look like the
following code:
<template>
<div class="test">
<button @click="newJoke">New Joke</button>
<p>{{joke}}</p>
</div>
</template>
<script>
const jokes = [
'Chuck Norris/'s keyboard has the Any key.',
'Chuck Norris can win at solitaire with only 18 cards.',
'Chuck Norris/' first job was as a paperboy. There were no survivors.',
'When Chuck Norris break the build, you can/'t fix it.',
]
export default {
name: 'joke-button',
data () {
return {
joke: '...',
}
},
methods: {
newJoke () {
this.joke = jokes[Math.floor(Math.random() * jokes.length)]
},
},
}
</script>Obviously, you can create the component you prefer; this is just an example.
In the index.js file, you will see the Test component imported and installed; you will
need to install the JokeButton instead. The lines you need to change are highlighted:
import JokeButton from './components/JokeButton.vue'
// Install the components
export function install (Vue) {
Vue.component('jokeButton', JokeButton)
/* -- Add more components here -- */
}
// Expose the components