Organize + Automate + Deploy = Webpack Chapter 16How to do it...
Create a new npm project in a new directory, either with npm init -y or yarn init -y.
I personally prefer the second one because the resulting package.json is much more
compact.
To install Yarn, you can use the npm install -g yarn command. The
main benefit of Yarn is that you will be able to lock your dependencies to
a known version. This prevents bugs when working in teams and the
application gets cloned from Git with slightly different versions that
introduce incompatibilities.You will create a digital swear jar. For every swear word you pronounce, you donate
an amount of money to a swear jar for a long-term objective.
Create a new file, named SwearJar.vue, and add the following code inside it:
<template>
<div>
Swears: {{counter}} $$
<button @click="addSwear">+</button>
</div>
</template>
<script>
export default {
name: 'swear-jar',
data () {
return {
counter: 0
}
},
methods: {
addSwear () {
this.counter++
}
}
}
</script>You will insert this component on a web page.