Laravel-VueJS-project-04

Installation

# clone the project
git clone https://github.com/mohsin-riad/SD-project-04.git
 
# enter the project directory
cd vuejs-project4

# install dependency
npm install

# develop
npm run dev

# enter the project directory
cd ../laravel-project4

# install dependency
composer install

# develop
php artisan serve

Export updated database sd_project_04 to Localhost Server

• open http://localhost:8080

---

Backend [Laravel]

Laravel is a MVC(Model View Controller) framework

Build Setup

install dependency (composer)

• setup: composer

cli

# one time install only
composer global require laravel/installer  

# initial project creation     
laravel new laravel-project4   

# create/run server #url: http://127.0.0.1:8000/                 
php artisan serve                               

---

Frontend [Vue-JS]

Build Setup

install Node Js(v8 engine) | dependency (npm)

• setup: NOdeJs LTS

cli

# one time install only
npm install -g @vue/cli                        
npm install -g @vue/cli-init                   

# initial project creation
vue init webpack vuejs-project4          

# create/run server  #url: http://localhost:8080/
npm run dev                                     

Bootstrap Integration

# individual project integration
npm i bootstrap

Add to : src/main.js

import 'bootstrap'; 
import 'bootstrap/dist/css/bootstrap.min.css'; 

Bootstrap vue Integration

# individual project integration
# With npm
npm install vue bootstrap bootstrap-vue

Add to : src/main.js

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' 
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

Api Package configuration [Axios]

# individual project integration
npm i axios --save

Add to: src/main.js

import axios from 'axios'
Vue.prototype.$http = axios

used to sent POST and GET request to the server

Database

Export updated database project_04 to Localhost Server