prepare project with Laravel + AdminLTE + Vue.js

install laravel 5.4 + adminlte-laravel + Vue.js

Config php.ini

extension=php_openssl.dll
extension=php_pdo_mysql.dll

Create project

run command

composer create-project --prefer-dist laravel/laravel blog "5.4.*"

Setup adminlte package

ref : https://github.com/acacha/adminlte-laravel

run command

composer require "acacha/admin-lte-template-laravel:4.*"

edit config/app.php

'providers' => [
...
Acacha\AdminLTETemplateLaravel\Providers\AdminLTETemplateServiceProvider::class,
];
'aliases' => [
...
'AdminLTE' => Acacha\AdminLTETemplateLaravel\Facades\AdminLTE::class,
];

run command

php artisan vendor:publish --tag=adminlte --force
php artisan make:adminUserSeeder
composer dump

Setup menu

ref : https://github.com/acacha/adminlte-laravel
ref : https://laravelcollective.com/

run command

composer require "spatie/laravel-menu:2.1.5"
composer require "laravelcollective/html:5.4.9"

edit config/app.php

'Html' => Spatie\Menu\Laravel\Html::class,
'Link' => Spatie\Menu\Laravel\Link::class,
'Menu' => Spatie\Menu\Laravel\Menu::class,

run command

php artisan adminlte:menu

Install Excel package (optional) ไม่ต้องทำก็ได้

ref : https://github.com/Maatwebsite/Laravel-Excel

run command

composer require "maatwebsite/excel:2.1.0"

edit config/app.php

'providers' => [
...
Maatwebsite\Excel\ExcelServiceProvider::class,
];
'aliases' => [
...
'Excel' => Maatwebsite\Excel\Facades\Excel::class,
];

image package (optional) ไม่ต้องทำก็ได้

ref : http://image.intervention.io/getting_started/installation

run command

composer require "intervention/image:2.4.1"

edit config/app.php

'providers' => [
...
Intervention\Image\ImageServiceProvider::class,
];
'aliases' => [
...
'Image' => Intervention\Image\Facades\Image::class,
];

run command

php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5"

Install jwt-auth (optional) ไม่ต้องทำก็ได้

ref : https://github.com/tymondesigns/jwt-auth

run command

composer require "tymon/jwt-auth:0.5.12"

edit config/app.php

'providers' => [
...
Tymon\JWTAuth\Providers\JWTAuthServiceProvider::class,
];
'aliases' => [
...
 'JWTAuth' => Tymon\JWTAuth\Facades\JWTAuth::class,
 'JWTFactory' => Tymon\JWTAuth\Facades\JWTFactory::class,
];

Setup Database

config database : config\database.php

'charset' => env('DB_CHARSET', 'utf8mb4'),
'collation' => env('DB_COLLATION', 'utf8mb4_unicode_ci'),

config .env

config for mysql database not suuport utf8mb4

DB_CHARSET = utf8
DB_COLLATION = utf8_unicode_ci

edit file .\database\seeds\DatabaseSeeder.php
add $this->call(AdminUserSeeder::class);

public function run()
{
    $this->call(AdminUserSeeder::class);
    //$this->call(UsersTableSeeder::class);
}

run command

php artisan migrate --seed

Seed User (optiona ) ไม่ต้องทำก็ได้

php artisan make:seeder UsersTableSeeder

edit file .\database\seeds\UsersTableSeeder.php

public function run()
    {
        $faker = Faker\Factory::create();
        App\User::create([
            'name' => 'user',
            'email' =>'user@project.app',
            'password' => bcrypt('123456'),
        ]);
}

edit file .\database\seeds\DatabaseSeeder.php
by uncomment $this->call(UsersTableSeeder::class);

public function run()
{
    $this->call(UsersTableSeeder::class);
}

Start Internal Server for dev

run command

php artisan serv

login at http://127.0.0.1:8000
email : admin@example.com
password : 123456

Develop with vuejs watch

ref : https://laravel.com/docs/5.4/frontend

for write vuejs with Auto Compile .vue on folder resources\assets\js

edit file ./webpack.mix.js and comment

// .less(‘resources/assets/less/adminlte-app.less’,’public/css/adminlte-app.css’)

run command

npm install
npm run watch

https://help.medium.com/hc/en-us/sections/115001484747-Editing-formatting

**** Fast Script

ไม่จำเป็นต้องทำขั้นตอนนี้เลย : No need to do this step.

composer create-project --prefer-dist laravel/laravel blog "5.4.*" &
cd blog & composer require  "acacha/admin-lte-template-laravel:4.*" "maatwebsite/excel:^2.1" "intervention/image:2.4.1" "tymon/jwt-auth:0.5.12" "laravelcollective/html:5.4.9" "spatie/laravel-menu:2.1.5" 

edit config/app.php

'providers' => [
...
Acacha\AdminLTETemplateLaravel\Providers\AdminLTETemplateServiceProvider::class,
Maatwebsite\Excel\ExcelServiceProvider::class,
Intervention\Image\ImageServiceProvider::class,
Tymon\JWTAuth\Providers\JWTAuthServiceProvider::class,
];
'aliases' => [
...
'AdminLTE' => Acacha\AdminLTETemplateLaravel\Facades\AdminLTE::class,
'Excel' => Maatwebsite\Excel\Facades\Excel::class,
'Image' => Intervention\Image\Facades\Image::class, 
'JWTAuth' => Tymon\JWTAuth\Facades\JWTAuth::class,
'JWTFactory' => Tymon\JWTAuth\Facades\JWTFactory::class,
'Html' => Spatie\Menu\Laravel\Html::class,
'Link' => Spatie\Menu\Laravel\Link::class,
'Menu' => Spatie\Menu\Laravel\Menu::class,
];

Run Command

php artisan vendor:publish --tag=adminlte --force & php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5" & php artisan adminlte:menu & php artisan make:adminUserSeeder & 
composer dump

config

edit file .\database\seeds\DatabaseSeeder.php
add $this->call(AdminUserSeeder::class);

public function run()
{
    $this->call(AdminUserSeeder::class);
    //$this->call(UsersTableSeeder::class);
}

Setup User

Setup Database before migrate (วิธีการอยู่ด้านบน ๆ)

php artisan migrate --seed 

if error on npm watch

npm install node-sass sass-loader node-less less-loader --save-dev