In this tutorial, I am going to make single file component with Vue.js so you can compile it using Webpack. If you are not familar with how to work with vue-cli and webpack please follow this article
Once I create the project with vue-cli I am going to create new file called ProductTable.vue under the src folder of the project
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<template> <div> <table> <th> <td> Product Name </td> <td> Unit Price </td> </th> <tr> <td> Coca Cola </td> <td> 1.00 </td> </tr> <tr> <td> Sprite </td> <td> 1.20 </td> </tr> </table> </div> </template> <script> export default { name:"product-table", data () { return { msg: 'My Product Table' } } } </script> |
So this will have the template and script tags where you can write your code easily.
Next, I am going to add some code to the main.js file so that you can load the ProductTable component
|
1 2 3 4 5 6 7 |
import Vue from 'vue' import ProductTable from './ProductTable.vue' new Vue({ el: '#app', render: h => h(ProductTable) }) |
Finaly you can run the following command in terminal to see the webpage
|
1 |
npm run dev |