Vue.js: Up and Running

Appendix A. Bootstrapping Vue

Setting up Vue from scratch with a build tool, tests, and all the libraries required to write a large application can be an educational experience that everyone should attempt once. However, realistically, it can be a pain and is probably not something you want to do every time you set up Vue. You can set up a fully functional Vue install in numerous ways without having to set it up yourself, and this short appendix covers some of them.

vue-cli

vue-cli enables you to quickly bootstrap Vue applications from various provided templates. I used to set up pretty much every Vue project I work on.

To install vue-cli:

$ npm install --global vue-cli

Then, pick the template that you want to install and run npm init [template name]. For example, to use the webpack template, run the following:

$ vue init webpack

You’ll then be presented with a setup wizard, which asks a series of questions such as where you want to set up your project, what libraries you want to be installed, and some npm setup information.

Depending on what template you choose, it’ll look something like this:

Once you’ve installed the dependencies of your new project, you can run the startup command it gives you (for the webpack template, it’s npm run dev), and you’ll be able to dive in with a fully setup application that requires very little configuration to get to where you want it.

Several ...