Introduction to vue-cli
vue-cli is a utility that is brought to us by Vue.js Team. vue-cli is a utility that helps you to scaffold vue.js applications with various build systems. The various templates or project scaffolding that are available are as follows:-
All the above templates are available for you to get started with the Vue.js project. So let’s get started with generating the Vue.js application using one of the templates. This will help us to get started with the Vue.js application.
Installation of vue-cli
In order to install the vue-cli go ahead and check the below-mentioned points.
- Node.js (>=4.x, 6.x preferred)
- npm version 3+
Run the below command in the terminal.
$ npm install -g vue-cli
In order to create a new Project go ahead and type the following, here you can see the project template and the project name that you want to have.
$ vue init <template-name> <project-name>
Generating a ToDo List Project
In order to create a ToDo List project, let’s go ahead and scaffold a new project.
$ vue init webpack todolist
After executing the above code you will get some of the options on the screen you need to fill. We did fill them in the following format as shown below.
$ vue init webpack ToDoList
? Project name todolist
? Project description A simple Vue.js List
? Author thewebjuice
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
vue-cli · Generated "ToDoList".
To get started:
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
Now the project is ready, navigate into the project and install the node packages
$ npm install
Running the application is also very straight forward
$ npm start
You should be prompted to open the browser at http://localhost:8080 and then you should be able to see the below screen.
This confirms that your vue-cli has been installed correctly with the webpack template and the application is running fine.
This leads to the end of this tutorial. This clearly enables you to get your hands wet with the creation of scaffolding vue.js application.
Also published on Medium.