In this section, we'll build a new project with NPM, then add webpack to it, and finally add a Vue single file component to it.
First, let's make a new directory by taking the following steps. We'll call our project npm-vue-webpack:
- Open Git Bash and add a new folder as follows:
mkdir npm-vue-webpack && cd $_
- Initialize npm as follows:
npm init -y
- Next, install Vue and webpack into our new project as follows:
npm install vue webpack webpack-cli --save-dev --verbose
Once the NPM installation is complete, we can verify the folders and the contents of package.json as we did earlier in the chapter.
- Next, add the source and output folders our project will use as follows:
mkdir dist src
- Open our new project in VS Code as follows:
code .
Now, we can add two new files right from the VS Code editor...