VueJs

Vuejs 

I. Introduction and installation

  I would like to simplify fro vueJs documents for every fresh learner, starting from zero to advance level.

Before starting learning vueJs, I would like you to have some basic of traditional Javascript as the first prerequisites.

First, you may need to install composer, package management for Javascript.  This will help you to manage any packages you want to add in order that you can use components built by other third parties.

Please download this composer: https://getcomposer.org/download/ and install it.  I would like you to check whether your composer installed correctly by going to command prompt and type composer -v 

After you get result like above, this shows that you have successfully installed composer package manager.

 After that, you can add vueJs package to develop any front-end web or mobile app as this type of Javascript built for both.

You may start by creating a folder, training for instance.
Then, you may start your terminal/ command prompt then go to that folder and type

npm install vue


 During vue installation, you may need to answer some questions such as:

- name of project: enter anything you prefer
- description of project: enter anything you prefer
- stylesheet(css) of project: my case i take scss

After that, you may go to folder(training) then type npm install

To verify the completeness of setting up vue, open any IDE or Text editor and find file named package.json


 If you get result as above, you are success, congratulation.

To create project, let say training, you are required to install vue cli like below:

   npm install -g vue/cli

    vue init webpack-simple project_name

 In my case my project_name is training.

You may see generated file named App.vue, index.html and man.js

index.html content as below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>training</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>

You don't need to modify anything within this index.html file.
The important note here is id="app", meaning that every components registered will be rendered under app.

App.vue content as below:

<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
name: 'app',
components: {
HelloWorld
}
}
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

For this App.vue content is a bit complicated for beginner but don't worry i will simplify it later.

main.js content as below:

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')

As you already installed vue, all files with extensions js like main.js must import Vue and App form App.vue file due to App.vue is default file.

new Vue({
render: h => h(App), // this line renders app component
}).$mount('#app') // this line means mounting app components with id="app"

Comments

Post a Comment

Popular posts from this blog

Vuex mapMutations

Image
VueX mapMutations: is used simply to replace this.$store.commit('abc') to   mapMutations(['abc','..']) . its functionalities are the same but mapMutations is more preferable and useful as it is able to combine different functions in mutations into one. Example: App.vue < template > < div id = "app" > < Counter /> </ div > </ template > < script > import { store , Counter } from './state/simple' export default { name: 'app' , store , components: { Counter }, data () { return { placeHolder: 'Focus on me' } }, } </ script > simple.js import Vue from 'vue' ; import Vuex , { mapGetters , mapMutations } from 'vuex' ; Vue . use ( Vuex ) const store = new Vuex . Store ({ state: { products: [ { id: 1 , name: 'pizza' , price: 10 }, ...
Read more

VueX Actions

Image
VueX Actions: can be used interchangeably with mutations however, actions  be used to commit mutations asynchronously whereas mutations can only be synchronous. Vuex Actions accepts context object as argument for each handler functions and this context contains commit, state, getters, and dispatch as it store instance. In order to call handler functions inside Actions properties from vue component, we use this.$store.dispatch('deductPrice').  When it dispatches from vue component, actions handler function will call mutations handler function with payload injected. Example: simple.js import Vue from 'vue' ; import Vuex , { mapGetters , mapMutations } from 'vuex' ; Vue . use ( Vuex ) const store = new Vuex . Store ({ state: { products: [ { id: 1 , name: 'pizza' , price: 10 }, { id: 2 , name: 'fan' , price: 20 }, { id: 3 , name: 'headset' , price: 30 }, { id: 4 , name: 'phone' , price: ...
Read more

VueX Modules

Image
VueX Modules: is important for large scale project as it make developer more easier to separate store state as module for example moduleOne and moduleTwo. Each module has its own state, getters, actions, mutations and namespace . However, namespace is optional. Nevertheless, it is best practice to have it to prevent some conflicts among modules state, actions, getters, mutations. Example: I have two modules with namespace inside. moduleOne const moduleOne = { namespaced: true , state: { products: [ { id: 1 , name: 'pizza' , price: 10 }, { id: 2 , name: 'fan' , price: 20 }, { id: 3 , name: 'headset' , price: 30 }, { id: 4 , name: 'phone' , price: 1004 } ] }, mutations: { deductPrice ( state ) { return state . products . map ( item => item . price -= 1 ) }, multPrice ( state , payload ) { return state . products . map ( item => i...
Read more