Last active
August 10, 2018 08:20
-
-
Save teepluss/de40f94f0c45292541924dd2259129ee to your computer and use it in GitHub Desktop.
Config "AdminLTE" with Laravel Elixir
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "directory": "./resources/assets/vendor" | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "L53", | |
| "description": "", | |
| "main": "", | |
| "authors": [ | |
| "Teepluss <[email protected]>" | |
| ], | |
| "license": "MIT", | |
| "homepage": "https://github.com/teepluss/laravel53-bootstrap", | |
| "ignore": [ | |
| "**/.*", | |
| "node_modules", | |
| "bower_components", | |
| "./resources/assets/vendor", | |
| "test", | |
| "tests" | |
| ], | |
| "dependencies": { | |
| "AdminLTE": "admin-lte#^2.3.6", | |
| "font-awesome": "^4.6.3", | |
| "Ionicons": "ionicons#^2.0.1", | |
| "jquery": "^2.2.3", | |
| "bootstrap": "^3.3.6" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| window._ = require('lodash'); | |
| /** | |
| * Next, we will create a fresh Vue application instance and attach it to | |
| * the body of the page. From here, you may begin adding components to | |
| * the application, or feel free to tweak this setup for your needs. | |
| */ | |
| /** | |
| * Vue is a modern JavaScript library for building interactive web interfaces | |
| * using reactive data binding and reusable components. Vue's API is clean | |
| * and simple, leaving you to focus on building your next great project. | |
| */ | |
| window.Vue = require('vue'); | |
| require('vue-resource'); | |
| /** | |
| * We'll register a HTTP interceptor to attach the "CSRF" header to each of | |
| * the outgoing requests issued by this application. The CSRF middleware | |
| * included with Laravel will automatically verify the header's value. | |
| */ | |
| Vue.http.interceptors.push((request, next) => { | |
| request.headers['X-CSRF-TOKEN'] = Laravel.csrfToken; | |
| next(); | |
| }); | |
| /** | |
| * Application login go here!. | |
| */ | |
| const app = new Vue({ | |
| el: '#vue-app', | |
| data: () => { | |
| return { | |
| lists: [ | |
| {'id': 1}, | |
| {'id': 2} | |
| ] | |
| } | |
| }, | |
| ready: () => { | |
| //console.log('VUE INSTANCE'); | |
| }, | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const elixir = require('laravel-elixir'); | |
| require('laravel-elixir-vue'); | |
| /* | |
| |-------------------------------------------------------------------------- | |
| | Elixir Asset Management | |
| |-------------------------------------------------------------------------- | |
| | | |
| | Elixir provides a clean, fluent API for defining some basic Gulp tasks | |
| | for your Laravel application. By default, we are compiling the Sass | |
| | file for our application, as well as publishing vendor resources. | |
| | | |
| */ | |
| process.env.DISABLE_NOTIFIER = true; | |
| let dirs = { | |
| 'vendor': "./resources/assets/vendor" | |
| } | |
| elixir(mix => { | |
| mix.sass('app.scss') | |
| .webpack('app.js'); | |
| // CMS Execute. | |
| mix.webpack('cms.js'); | |
| // Compile AdminLTE scripts to single file. | |
| mix.scripts([ | |
| dirs.vendor + '/jquery/dist/jquery.js', | |
| dirs.vendor + '/bootstrap/dist/js/bootstrap.js', | |
| dirs.vendor + '/AdminLTE/plugins/fastclick/fastclick.js', | |
| dirs.vendor + '/AdminLTE/dist/js/app.js', | |
| dirs.vendor + '/AdminLTE/plugins/sparkline/jquery.sparkline.js', | |
| dirs.vendor + '/AdminLTE/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js', | |
| dirs.vendor + '/AdminLTE/plugins/jvectormap/jquery-jvectormap-world-mill-en.js', | |
| dirs.vendor + '/AdminLTE/plugins/slimScroll/jquery.slimscroll.js', | |
| dirs.vendor + '/AdminLTE/plugins/chartjs/Chart.js' | |
| ], 'public/js/admin.js'); | |
| // Compile AdminLTE to single file. | |
| mix.styles([ | |
| dirs.vendor + '/bootstrap/dist/css/bootstrap.css', | |
| dirs.vendor + '/font-awesome/css/font-awesome.css', | |
| dirs.vendor + '/Ionicons/css/ionicons.css', | |
| dirs.vendor + '/AdminLTE/plugins/jvectormap/jquery-jvectormap-1.2.2.css', | |
| dirs.vendor + '/AdminLTE/dist/css/AdminLTE.css', | |
| dirs.vendor + '/AdminLTE/dist/css/skins/_all-skins.css' | |
| ], 'public/css/admin.css') | |
| // Copy AdminLTE assets. | |
| mix.copy(dirs.vendor + '/font-awesome/fonts', 'public/fonts') | |
| .copy(dirs.vendor + '/Ionicons/fonts', 'public/fonts') | |
| .copy(dirs.vendor + '/bootstrap/dist/fonts', 'public/fonts') | |
| .copy(dirs.vendor + '/AdminLTE/dist/img', 'public/img') | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $ npm install | |
| $ bower install | |
| $ gulp --production |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- CSRF Token --> | |
| <meta name="csrf-token" content="{{ csrf_token() }}"> | |
| <title>Laravel</title> | |
| <!-- Styles --> | |
| <link href="{{ elixir('css/cms.css') }}" rel="stylesheet"> | |
| <!-- Scripts --> | |
| <script> | |
| window.Laravel = <?php echo json_encode([ | |
| 'csrfToken' => csrf_token(), | |
| ]); ?> | |
| </script> | |
| </head> | |
| <body class="hold-transition skin-blue sidebar-mini"> | |
| <div class="wrapper"> | |
| <!-- Header --> | |
| @include('layouts.cms.header') | |
| <!-- Left side column. contains the logo and sidebar --> | |
| @include('layouts.cms.sidebar') | |
| <!-- Content Wrapper. Contains page content --> | |
| <div class="content-wrapper"> | |
| @yield('content') | |
| </div> | |
| <!-- /.content-wrapper --> | |
| <!-- Footer --> | |
| @include('layouts.cms.footer') | |
| </div> <!-- ./wraper --> | |
| <script src="{{ elixir('js/admin.js') }}"></script> | |
| <script src="{{ elixir('js/cms.js') }}"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment