Organize + Automate + Deploy = Webpack Chapter 16How to do it...
For this recipe, you will build a reusable component that shakes whatever you put into it;
for this, we will use the excellent CSShake library.
Create a new clean project based on the Webpack template. You can take a look at the
previous recipe to see how to do that, or you can use the prebuilt template I made. You can
use my template by creating a new directory and running this command:
vue init gurghet/webpackChoose the default answers if you don't know what they mean. Remember to run npm
install to bring in the dependencies.
Let's first rename a couple of things: rename the App.vue file to Shaker.vue.
Inside it, write the following as the HTML template:
<template>
<span id="shaker" class="shake">
<link rel="stylesheet" type="text/css"
href="https://csshake.surge.sh/csshake.min.css">
<slot></slot>
</span>
</template>Note how we changed the
because we want our shaker to be an inline component.
The component is complete as it is; we just need a minor cosmetic edit in the JavaScript
part:
<script>
export default {
name: 'shaker'
}
</script>To manually test our application, we can modify the main.js file in the following way (the
highlighted text is the modified code):
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an
alias.
import Vue from 'vue'
import Shaker from './Shaker'