Vue.js - Setup & Development

By Noctorus.

This is an introduction to a powerful framework (namely Vue.js), that would potentially saving a lot of your time dealing with library references or writing scripts for Gulp with manual referencing from Bower. Before trying Vue.js, I was almost skeptical about it, in term of ease of use, as well as the extensibility for using currently available JavaScript, or the older generation of jQuery modules.

All of these has been answered throughout the journey of my first project using Vue.js, albeit the journey wasn’t a smooth one, but it’s definitely worth it.

Ok, let’s get started.


Installation

Installation assumes you know/have:

  • basic web coding with languages like HTML, CSS and JavaScript
  • atom editor (recommended)
  • node.js and npm installed (in Terminal for Mac user)

Open up Terminal and type in (“?” sign meaning prompts for input):

$ sudo npm install --global vue-cli
$ vue init webpack myproject
? Project name: MyProject
? Project description: My first project.
? Author: Noctorus
? Vue build: standalone
? Install vue-router: Yes // important for multi-page app
? Use USLint to lint your code?: Yes
? Pick an ESLint preset: Standard
? Setup unit tests with Karma + Mocha?: Yes
? Setup e2e tests with Nightwatch? Yes
// myproject generated here!
$ cd myproject
$ npm install
$ npm run dev

Abnormal installation issues (this happens during my first installation, it could be that your npm hasn’t yet install the required library or loader globally /usr/local/), so please proceed:

// in case of linking error during npm run dev
// please try the following (depending the error):
$ sudo npm install -g eslint babel-eslint
$ eslint --init
// in case of dependency issue with webpack
// please install the following
$ npm install --save-dev html-loader json-loader less less-loader style-loader node-sass sass sass-loader
// or other dependency issue
$ npm install axios (or your missing npm module)

Project structure

Current Vue.js project structure.

It is a good practice separating Vue components into different functional folders:

  • components— for reusable Vue view components.
  • controllers — for Vue back-end components, or developing your own plugin; you may google the term ‘mixins’ to extend functionality of your controls.
  • pages — for view pages.
  • other folders such as assets, styles for resources or images.

Vue project & lifecycle

To understand how Vue works, first you must know a few points below:

  • Vue Lifecycle (from alligator.io)
  • Main entry point is still at index.html, you may load your old CSS or JavaScript file here using <script> or <link> tags as usual. But as you proceed, you will find that loading JavaScript modules are far more easy using NPM in Terminal (e.g.: npm install font-awesome) and load it up in src/main.js (e.g.: @import ‘~font-awesome/scss/font-awesome’).
  • To extend the point above, Webpack will package the linked components together automatically from Vue entry point with src/main.js file (subsequently src/main.js file will load the App.vue and Vue router).
  • By running “npm run dev”, it will fire up the instance of your first project without even using any stack application like XAMPP or MAMP. However, if your port is occupied, let’s say if 8080 is being used by MAMP for server development purpose, you may change the default port of your Vue project in config/index.js by setting module.exports -> dev -> port.

Vue basic file structure

The following is the very essence of Vue.js, whereby you can script a module with template, script and style, all within the same *.vue file itself:

Vue structure (let’s say this is named as components/MyFirstVue.vue file):

<template>
<div class="my-first-vue">
</div>
</template>
<script>
// import OtherComponent from '@/components/OtherComponents'
export default {
components: {
// OtherComponents
},
data () {
return {
myFirstData: 'abc'
}
},
methods: {
myFirstMethod () {
return 'def'
}
},
created () {
// first Vue component created
},
mounted () {
// first Vue component mounted
}
}
</script>
<style> 
// I prefer using <style lang="scss"> for better functionality;
.my-first-vue {
background-color:#CCCCCC;
}
</style>

To link/use the Vue file above:

<template>
<div class="my-first-page">
<my-first-vue></my-first-vue>
</div>
</template>
<script>
<script>
import MyFirstVue from '@/components/MyFirstVue'
export default {
components: {
MyFirstVue // this will automatically refined as directive with dash: MyFirstVue -> my-first-vue in HTML tag
}
}
</script>

That’s all for the first Vue lesson.


Please kindly leave your feedback below this post in case if you have any enquiries.