Scaffolding Vue Projects – Simple Template

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
nsingh$ npm -v

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
└── 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 (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.

Posted in Generic, JS Frameworks, VueJS, VueJS, Web Technology

Leave a Reply

Your email address will not be published. Required fields are marked *