Reusable, Scalable and Easy to organize project using VueJS ( Part 3 )
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.
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 globallyconst EventBus = new Vue()
Object.defineProperties(Vue.prototype, {
$bus: {
get: function() {
return EventBus
}
}
})// App.vue
// Listen the eventthis.$bus.$on('isLoading', (event) => {
this.loadingStatus = event
})// Signin.vue
// Fire the callthis.$bus.$emit('isLoading', false)
International
For the Web Application added International
// main.js
// Setup up the default language in applicationimport i18n from './locales'const lang = store.state.language
if (lang) {
i18n.locale = lang
}// index.js (./locales/index.js)
// Config of localesimport 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 helperexport * from './moments' // moments helper
export * from './popups' // popups helper
export * from './vars' // vars helper// index.js (vars/index.js)
// Just export and returnexport function getAlertType(index) {
let alertType = ['success', 'info', 'warning', 'error', 'http']
return alertType[index]
}// Signin.vue
// Generally usageimport { getAlertType } from '../../helpers'methods: {
test() {
let x = getAlertType(2)
console.log(x) // warning
}
}
Vuex
For Vuejs Application
// root.js (./store/root.js)
// Just follow standard flow of stateexport 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 stateexport const SET_LANGUAGE = 'SET_LANGUAGE'
Axios
Handle API Calls of Application
// interceptor.js (./interceptor.js)
// For all axios request and responeaxios.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) => {})
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 )
Reusable, Scalable and Easy to organize project using VueJS ( Part 2 )
Reusable, Scalable and Easy to organize project using VueJS ( Part 3 )
To be Continue…
