The Vue CLI makes working with Vue a simple process. It handles a lot of the behind the scenes busy work so that you can start creating Vue apps quickly.
Vue has a few templates that you can generate apps with:
Vue can bring in a tool like webpack in order to handle complicated processes like:
Table of Contents
- ES6 imports
- Transpiling with Babel
- Compiling Sass
- Injecting templates
- And more
Why Use the CLI?
The CLI will handle a lot of the development tooling for us so that we don't have to. When building apps, we would much rather worry about what makes our app unique rather than the build tools or our setup configuration.
The CLI gives us build setups and fast startup so we can focus on building our apps.
Installing the CLI
We'll use npm to install the CLI globally:
npm install --global vue-cli
Once we have the CLI installed, you can check what version you are using with:
Using the CLI
Next, we can start building out applications with the above templates.
Here's how we would create an app called
my-new-project with the CLI's
vue init webpack my-new-project
You'll be prompted with many options and you'll see lots of important things the CLI can do for us:
- Adding vue-router
- Adding an ESLint config
- Adding unit tests
- Adding e2e tests
- Installing dependencies
Here we can see all the files the CLI adds for us. We have the foundation for a large scale Vue app:
Vue will give you instructions after it creates the application to install the dependencies and start developing:
cd my-new-project # install dependencies npm install # start the app npm run dev
Developing with the webpack Template
The webpack template gives us a convenient way to run a development server with webpack-dev-server.
webpack-dev-server will automatically refresh our browser on changes. This is a very convenient feature that allows us to develop quickly.
The other templates will give you different setups. The
webpack template is most common. The webpack template provides a full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
webpack-simple template will give you a webpack Vue app that is similar to the
webpack template but without testing and routing.
simple template will be a basic HTML page with a drop in Vue
pwa template is based on the
webpack template and will add in some progressive web app features
browserify templates are similar to the
webpack template but use Browserify instead.