This project based on real world practice and ready to use. Have a fun!
- Http request class that implements API calls with Auth and tokens refresh based on Axios
- Data access layer/API calls
- Response wrapper/Response error wrapper
- Base common and layout components
- Some help mixins
- Vue CLI v4
- Developed to work with: https://github.com/zmts/supra-api-nodejs
Source =)
Images/Fonts/Other media stuff.
Shared components folder.
DataBox
wrap in this component any received data. It represents loading(spinloader animation), error and empty statuses (examaple insrc/pages/News.vue
).UiImgLoader
-img
tag wrapper. Shows image loading(pulseloader animation) status and animate onloading as option.UiModal
- simple modal window.PulseLoading
andSpinnerWave
- loading animation.UiUploadMulti
andUiUploadSingle
- file upload example components.- ...
App config files. Each category in separate file.
- Handy debounce directive
Base app layout components.
Header
,Footer
components and main layout wrapper.
- One method/prop per file principle.
- Name files same as method/prop.
currentUser
- Includes current user object from store. Global.formatDateTime
- Datetime moment formatters. Global.jumpTo
- Help jump to some DOM element. Global.prepareFetchParamsMixin
- Prepare params for data fetching (examaple insrc/pages/News.vue
).prepareQueryParamsMixin
- Prepare params for setting it in URL (examaple insrc/pages/News.vue
).setModelMixin
- Use to set same fields from response that declared in front-end model.
Page wrapper components(Pages) and Local components.
globalEventBus
- $bus.
Router instance and routing declaration.
index
- router initialization.routes
- routing.middlewares
:initCurrentUserStateMiddleware
- Current user state initialization (each time app loads, check refresh token and fetch current user if token exist.)checkAccessMiddleware
- Each time user change route, check permissions to route.setPageTitleMiddleware
- Each time user change route, set page title.
util
:routePropResolver
- Pass params from URL to component as props (example insrc/router/routes.js
)
Style files(partials, variables, mixins, reset).
Data access layer/API calls.
- ES6 API calls classes.
- API calls must be represented in separate classes (not in vuex action).
auth.service
- Auth methods and API calls.http.init
- Http request class.util
:ResponseWrapper
- Represent response object.ErrorWrapper
- Represent error object.clearData
- Uses to clear request data before send it. Helper.
App store with separate modules.
Environment variables (add this to git ignore).
Root app initialization file.
In /build/utils.js
>> generateLoaders('sass')
import debounce from '../directives/debounce'
directives: {
debounce
}
And use it in a template.
<input type="text" v-model="name" v-debounce="500" @debounce-change="runSomeMethod">
Just make mutation
commit('dom/TOAST', { message: 'hello', duration: 2000, type: 'success' })
Set up yours svg icons in src/components/icons/
folder. Modify UiIconBase.vue
related to yours newly added icons and use it in template.
<UiIconBase size="40" color="yellow" icon="write"/>
# clone repo
git clone https://github.com/zmts/vuejs-boilerplate.git
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run serve
# build for production with minification
npm run build
For a detailed explanation on how things work, check out the guide and docs for vue-loader.
- https://github.com/sdras/vue-sample-svg-icons
- https://github.com/MillerRen/vue-boilerplate
- https://github.com/vuejs-tips/v-debounce
!!! Project still in progress !!!
2017 - 2018 - 2019 - 2020 ...