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.
DataBoxwrap in this component any received data. It represents loading(spinloader animation), error and empty statuses (examaple insrc/pages/News.vue).UiImgLoader-imgtag wrapper. Shows image loading(pulseloader animation) status and animate onloading as option.UiModal- simple modal window.PulseLoadingandSpinnerWave- loading animation.UiUploadMultiandUiUploadSingle- file upload example components.- ...
App config files. Each category in separate file.
- Handy debounce directive
Base app layout components.
Header,Footercomponents 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 buildFor 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 ...
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent