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

Sep 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 <[email protected]>)

# 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 hellonpm 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

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.