Vue application created with Vue-cli, Vuex for state management and Vue-router for routing.
git clone [link] yarn yarn serve yarn build For this command, you need vue-cli 3. In case you don’t have this package installed, run the following command or find out the step-by-step tutorial using official documentation.
Remove vue-cli 2
yarn global remove vue-cli Install vue-cli 3 with a global flag
yarn global add @vue/cli Check version
vue --version ├public/ => Any static assets are placed here. ├src/ | ├─api/ => API functions | ├─assets/ => Folder for relative path files’ import | ├─components/ => Global components | ├─directives/ => Custom directives | ├─icons/ => SVG icons | ├─mixins/ => Global mixins | ├─router/ => Vue-router | ├─store/ => Vuex | ├─styles/ => Global styles | ├─utils/ => Global constants and helper functions | ├─views/ => Layouts for view | ├─App.vue => Main component | └─main.js => Main JS file └static/ => Folder for static path files import Vuex store is divided into modules. Each module has a main file index.js where Vuex patterns are gathered in actions, mutations and getters.
store/ ├─modules/ | └─bar/ | ├─actions.js | ├─mutations.js | ├─getters.js | └─index.js ├──app.js ├─getters.js ├─mutations-types.js └─index.js Modules are installed in the index.js file, which is in the Store root folder. The getters.js file is global to get application states. File with name mutations-types.js has names of mutations constants.
/* ... */ import app from './modules/app' import bar from './modules/bar' import getters from './getters' /* ... */ Vue.use(Vuex) const store = new Vuex.Store({ modules: { app, bar }, getters }) export default storeTo handle asynchronous actions we usually use Promise
import API from '@/api/index' export const actions = { AsyncAction: ({ dispatch, commit }, payload) => { API.fetch(payload.method, payload.path, payload.data) .then(response => { commit('MUTATION_TYPE', response) }) .catch(error => { dispatch('FailResponse', error) }) }, Action: ({ commit }, payload) => { commit('MUTATION_TYPE', payload) } }A directive is a special token in the markup that tells the library to take some actions to a DOM element. All custom directives are in different folders and are imported only if they are used in the component.
import directive from './directive' const install = (Vue) => { Vue.directive('directive', directive) } if (window.Vue) { window['directive'] = directive Vue.use(install) } directive.install = install export default directiveComponent icons are resolved as global for using in different components. Afterwards, all the SVG icons become Vue components.
// SvgIcon.vue <template lang="pug"> component(:is="iconClass" :class="svgClass") </template> <script> import Vue from 'vue' export default { name: 'SvgIcon', props: { iconClass: { type: String, required: true }, className: { type: String, default: '' } }, computed: { svgClass() { if (this.className) { return 'svg-icon ' + this.className } else { return 'svg-icon' } } }, created() { Vue.component(this.iconClass, () => import(`@/icons/svg/${this.iconClass}.svg`)) } } </script>import Vue from 'vue' import SvgIcon from '@/components/SvgIcon' // register globally Vue.component('svg-icon', SvgIcon) // main.js import './icons'For all the requests we are using axios. Create an axios instance for using base request template.
import axios from 'axios' const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, headers: { 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS', 'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token' }, timeout: 5000 }) service.interceptors.request.use( config => { return config }, error => { console.log(error) Promise.reject(error) } ) service.interceptors.response.use( response => response, error => { console.log('err' + error) // Message({ // message: error.message, // type: 'error', // duration: 5000 // }) return Promise.reject(error) } ) export default servicevue-base-template is Copyright © 2015-2018 Codica. It is released under the MIT License.
We love open source software! See our other projects or hire us to design, develop, and grow your product.