In this post we will setup a vue-cli for scaffolding due projects.
First things first , install vue-cli
At the time of writing this , to install vue-cli you need :
- Node installed (works with version >4.x)
- npm version 2+
nsingh$ node -v v4.2.1 nsingh$ npm -v 2.14.7
Now install the CLI:
sudo npm install -g vue-cli
Now we initialize a project. The command to use is :
vue init <template-name> <project-name>
Vue provides the following scaffolding templates:
- webpack – A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
- webpack-simple – A simple Webpack + vue-loader setup for quick prototyping.
- browserify – A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
- browserify-simple – A simple Browserify + vueify setup for quick prototyping.
- pwa – PWA template for vue-cli based on the webpack template
- simple – The simplest possible Vue setup in a single HTML file
Custom templates can also be used ( Read here : vue-cli)
Lets start with the simple template :
nsingh$ vue init simple simple_demo
This will ask a couple of questions (like name and author) and we can go with the default answers.
? name simple_demo ? author **Nishant**:: vue-cli · Generated "simple_demo".
Now go to the folder and see the folder structure:
nsingh$cd simple_demo nsingh$tree . └── index.html
Note : command “tree” can be installed on mac OS using:
brew install tree
Now you can open the code in your favorite editor (Would recommend atom or sublime ) and launch the code in browser:
This will launch on http://127.0.0.1:3000 (Default port on atom-live-server)
And the output can be seen.
So the “simple” template added the index.html with links to the vue js script and ready for exploring vue.
Next we will learn on using the webpack template.