This is Vue.js project made for the management of VPS through web interface (SPA) involving a wide of technologies.
- The project stills in development and this is only the base for now, almost all the features are pending to develop.
- The API code are not available in this repo (still private)
- Dashboard
- Domain List
- Based on the Webpack template of VueJS-Cli
- Vue-Router for handling app routes
- Vuex for management of the app states
- Axios for make request to a server (API Requests)
- Vuetify for beautiful material design components
- Get VPS server information
- Manage Nginx domains
- Manage database engines
- Manage services
- Manage Firewall
- Manage OpenVPN ... and more
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
The implementation of Axios has been made globally
, so any component can access the $axios
for make its own request in this way:
export default {
data () { },
created () { },
methods: {
methodName () {
this.$axios.get('http://some-resource.url/here')
.then(response => { })
.catch(e => { })
}
}
}
Router components are loaded in LazyLoad
way as described here, so router loads the component when it is needed and not at first page load:
// Lazy Loading
const Dashboard = resolve => require(['@/components/Dashboard'], resolve)
const DomainList = resolve => require(['@/components/DomainList'], resolve)
- https://laracasts.com/series/learn-vue-2-step-by-step
- https://router.vuejs.org/es/advanced/lazy-loading.html
- https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/
For detailed explanation on how things work, checkout the guide and docs for vue-loader.