Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1
Organize + Automate + Deploy = Webpack Chapter 16

Let's also take this opportunity to install Vue itself:


npm install --save vue

Now our Vue component is ready. We need to write a page in which to place it and try it.


Create a file called index.js inside the app folder. We will instantiate the component in a


Vue instance. Inside index.js, write the following:


import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})

This will mount the Vue instance inside an element with id="app", and it will contain a


single component--our App.vue.


We need one more file--an HTML file. In the root directory, create index.html with this


code:


<!DOCTYPE html>
<html>
<head>
<title>Webpack 2 demo</title>
</head>
<body>
<div id="app"></div>
<script src="dist/bundle.js"></script>
</body>
</html>

We don't want to refer to app/index.js directly here; this is because index.js itself


doesn't contain much. It has an import statement that won't be recognized by the browser.


Webpack can instead easily create dist/bundle.js with index.js inside, along with all


its dependencies. To do it, run this command:


./node_modules/webpack/bin/webpack.js app/index.js dist/bundle.js
Free download pdf