Reusable, Scalable and Easy to organize project using VueJS ( Part 3 )

Tommy Cxxx
Sep 12, 2017 · 3 min read

OK ! First of all, Thanks you for the time and patience you devoted to read my stories part 1, part 2, part 3 !

Although I finished the project folder structure, I need coding to connect all classification.

Base on vue-cli installation, we are ready starting from root level to coding to connect the structure.


Github

Due to time constraints, I already committed the code in Github.

Fork or git clone to try the folder structure demo !

During this period, I will keep update the minor change, but not affect the folder structure.

https://github.com/dc198689/pear


Summary

Besides the Github source code, I have summarize the code of the structure.


Event Bus

For example : a component pass data to a component

// main.js
// Use「Vue.prototype」to setup globally
const EventBus = new Vue()
Object.defineProperties(Vue.prototype, {
$bus: {
get: function() {
return EventBus
}
}
})
// App.vue
// Listen the event
this.$bus.$on('isLoading', (event) => {
this.loadingStatus = event
})
// Signin.vue
// Fire the call
this.$bus.$emit('isLoading', false)

International

For the Web Application added International

// main.js
// Setup up the default language in application
import i18n from './locales'const lang = store.state.language
if (lang) {
i18n.locale = lang
}
// index.js (./locales/index.js)
// Config of locales
import en from './i18n/en_US'
import cn from './i18n/zh_CN'
export default new VueI18n({
locale: 'en',
messages: {
en: {
lang: en
},
cn: {
lang: cn
}
}
})
// Signin.vue
// In the component file
$t('lang.components.input.placeholder[1].email') // or
{{ $t('lang.components.input.placeholder[1].email') }} // or
v-bind:title="$t('lang.components.input.placeholder[1].email')"
// In the js fileimport i18n from '../locale/config'i18n.t('lang.components.popup[0].expired.desc')

Helper

For application general usage, It’s customize by yourself !

// index.js (./helpers/index.js)
// Collection of different helper
export * from './moments' // moments helper
export * from './popups' // popups helper
export * from './vars' // vars helper
// index.js (vars/index.js)
// Just export and return
export function getAlertType(index) {
let alertType = ['success', 'info', 'warning', 'error', 'http']
return alertType[index]
}
// Signin.vue
// Generally usage
import { getAlertType } from '../../helpers'methods: {
test() {
let x = getAlertType(2)
console.log(x) // warning
}
}

Vuex

For Vuejs Application

Vuex of Vuejs
// root.js (./store/root.js)
// Just follow standard flow of state
export const state = {
// Initial the state with localStorage
language: localStorage.getItem('language') || ''
}
export const actions = {
switchI18n({ commit }, context) {
commit(types.SET_LANGUAGE, context)
}
}
export const mutations = {
[types.SET_LANGUAGE](state, data) {
i18n.locale = data
state.language = data
localStorage.setItem('language', data)
}
}
// mutations_types.js (./store/mutations_types.js)
// Declare the type of state
export const SET_LANGUAGE = 'SET_LANGUAGE'

Axios

Handle API Calls of Application

// interceptor.js (./interceptor.js)
// For all axios request and respone
axios.interceptors.request.use(config => {
return config
}, error => {
console.group('[Axios][Interceptor] Request Error')
console.log(error)
console.groupEnd()
return Promise.reject(error)
})
axios.interceptors.response.use(data => {
return data
}, error => {
console.group('[Axios][Interceptor] Response Error')
console.log(error)
console.groupEnd()
return Promise.reject(error)
})

Vue-Router

For Single Page Application

// index.js (./router/index.js)router.beforeEach((to, from, next) => {})router.afterEach((to, from) => {})

Well, Generally should be OK !

If you have issue, Pls let me know, Thx Part 1, Part 2, Part 3 to show the vuejs application folder structure.


Conclusion

In this Part 3


Extended Study

Project Source (Git)

https://github.com/dc198689/pear

Dynamic Translate using vue-i18n ( VueJS )

https://medium.com/@t198689/dynamic-translate-using-vue-i18n-vuejs-c730093a63e2

Reusable, Scalable and Easy to organize project using VueJS ( Part 1 )

https://medium.com/hong-kong-tech/reusable-scalable-and-easy-to-organize-project-using-vuejs-part-1-d08fa83b8581

Reusable, Scalable and Easy to organize project using VueJS ( Part 2 )

https://medium.com/hong-kong-tech/reusable-scalable-and-easy-to-organize-project-using-vuejs-part-2-c7e82044d7fc

Reusable, Scalable and Easy to organize project using VueJS ( Part 3 )

https://medium.com/hong-kong-tech/reusable-scalable-and-easy-to-organize-project-using-vuejs-part-3-ed8cba6b4dfe

To be Continue…

HKIT DOG

我們是來自香港的開發者,雖然我們技術還不是很成熟,但也希望可以為香港帶來開發技術的分享。各位有興趣加入我們的Publication的話可以主動submit或是聯絡我 :)

Tommy Cxxx

Written by

Software Engineer ( Front-end )

HKIT DOG

HKIT DOG

我們是來自香港的開發者,雖然我們技術還不是很成熟,但也希望可以為香港帶來開發技術的分享。各位有興趣加入我們的Publication的話可以主動submit或是聯絡我 :)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade