Compiling single-file components with webpack

To compile .vue components, we need to install vue-loader and vue-template-compiler into the webpack build process. But before that, we must create a package.json file in our project directory that lists the Node.js packages our project relies on. You can check the details of the package.json fields at https://docs.npmjs.com/creating-a-package-json-file. The most basic and required are the name and version fields. Let's get started:

1. Create a package.json file in your project directory with the following required fields and values:

// package.json
{
  "name": "vue-single-file-component",
  "version": "1.0.0"
}

2. Open a terminal, change the directory to your project, and install vue-loader and vue-template-compiler:

$ npm i vue-loader --save-dev 
$ npm i vue-template-compiler --save-dev

You should see a warning on your terminal since the Node.js packages you installed...