Vue.js 2.x Installation (using CLI) And Setup

September 12, 2017
Use vue-cli and webpack template as it comes with hot reload server and production build configuration.

Installation

There is a few ways to install Vue, but I prefer CLI as it’s configured with webpack and comes with a boilerplate template.

It’s slightly harder as it involve Node.js npm and Webpack, but you do get the benefits of hot reload server for testing and a production build configuration.

Install Node.js.

Install vue-cli.

npm install --global vue-cli

Create a project named hello using webpack template.

vue init webpack hello

You shall be promted of the following.

# press enter to use "hello"
? Project name (hello) 

# press enter to continue
? Project description (A Vue.js project) 

# press enter to continue
? Author (xxx <xxx@gmail.com>)

# select this
? Runtime + Compiler: recommended for most users

# select "Y" if you are building Single-Page Applications (SPA), else no
? Install vue-router? (Y/n)

# select "Y" to detect js problem and improve code quality, also more complaints.
? Use ESLint to lint your code? (Y/n)

# select this
? Standard (https://github.com/feross/standard)

# select "Y" for production
? Setup unit tests with Karma + Mocha? (Y/n) 

# select "Y" for production
? Setup e2e tests with Nightwatch? (Y/n)

Install npm packages for project hello.

cd hello
npm install

Startup a hot reload server for development.

npm run dev

The development server is started at http://localhost:8080 and automatically launch the browser.

To change the development server port or prevent auto open browser, edit config/index.js.

module.exports = {
  build: {
  	...
  },
  dev: {
  	...
    port: 8080,
    autoOpenBrowser: true,
    ...
  }
}

Start coding Vue

Make sure you run npm run dev and preview the output at http://localhost:8080.

Edit src/app.js and add the following code at the bottom the file.

new Vue({
  el: '#test',
  data: {
    message: 'Testing 123'
  }
})

Edit index.html and add a <div id="test"> tag.

...
  <body>
    <div id="test">{{ message }}</div>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
...    

You should be able to see Testing 123 shown at the top of the page.

Learn more about coding Vue.js using the official guide.

References

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.