https://vuejs.org/v2/guide/single-file-components.html
https://vueschool.io/lessons/introduction-to-single-file-components
For Users New to Module Build Systems in JavaScript
With .vue components, we’re entering the realm of advanced JavaScript applications. That means learning to use a few additional tools if you haven’t already:
-
Node Package Manager (NPM): Read the Getting Started guide section about how to get packages from the registry.
-
Modern JavaScript with ES2015/16: Read through Babel’s Learn ES2015 guide. You don’t have to memorize every feature right now, but keep this page as a reference you can come back to.
After you’ve taken a day to dive into these resources, we recommend checking out Vue CLI 3. Follow the instructions and you should have a Vue project with .vue components, ES2015, Webpack and hot-reloading in no time!
For Advanced Users
The CLI takes care of most of the tooling configurations for you, but also allows fine-grained customization through its own config options.
In case you prefer setting up your own build setup from scratch, you will need to manually configure webpack with vue-loader. To learn more about webpack itself, check out their official docs and Webpack Academy.