Front-end development - Getting Started: JavaScript & CSS scaffolding

Brief introduction

   Laravel does not force you to use any JavaScript or CSS preprocessor framework, but does provide some basic scaffolding is very useful for many applications of Bootstrap and Vue. By default, Laravel NPM used to install the front end packages.

 CSS

  Laravel Mix provides a clean, elegant API for compiling SASS or Less, and Less SASS is a new variable in a native, hybrid (MixIn), and other powerful features on the basis of CSS, so let us use the CSS more time to enjoy.

In this document, we will briefly discuss the compilation of CSS, however, you'd better refer to the full documentation for Laravel Mix compile more details of SASS or Less.

 JavaScript

Laravel does not force you to use the specified JavaScript framework or library to build applications, in fact, you can also do not use JavaScript, however, Laravel still introduces some basic scaffolding: Using  Vue  library allows us to more easily write modern JavaScript. Vue offers elegant API allows us to build powerful applications through JavaScript components. And CSS, we can use Laravel Mix easily compile multiple components into a single JavaScript file JavaScript.

  Remove the front end of the scaffolding Code

If you want to remove from the front end of the scaffolding application code, you can use the  preset command, and  none when used with the option, will be removed from the code Bootstrap and Vue scaffolding applications, leaving only empty SASS files and some common JavaScript practical library:

php artisan preset none

  Preparation of CSS

     Laravel application under the root directory of  package.json the file contains the  bootstrap extension package so that we can use to build Bootstrap front-end prototype, however, you can follow their own needs to add or delete application  package.json extension package file. In addition, not have to use the Bootstrap framework to build Laravel application - it just provides a good starting point for the selection of developers using Bootstrap.

     Before compiling CSS, using a front-end application NPM installation-dependent (Prior ensure Node.js system already installed):

npm install

     Use  npm install After installing the front-dependent, you can use Laravel Mix the SASS files compiled into pure CSS, npm run dev command processing  webpack.mix.js declaration file. Typically, compiled CSS file will be stored in the  public/css directory:

npm run dev

     Laravel comes with default  webpack.mix.js files compiled SASS file  resources/sass/app.scss, the  app.scss file will import a file containing SASS variables and load Bootstrap, so we help the rapid introduction of Bootstrap resource in the application. You also can customize according to their needs  app.scss file, you can even use a completely different pre-processor configuration by Laravel Mix.

   Written in JavaScript

     All rely on JavaScript applications are required in the application root directory  package.json found in this document and  composer.json similar, except that it specifies the JavaScript-dependent rather than rely on PHP. You can use NMP to install these dependencies:

npm install

Note: By default, Laravel own  package.json file introduces some expansion packs, such as  vue and  axios, in order to quickly build JavaScript applications, similarly, you can add or delete applications as desired  package.json extension package.

     After a good extension package is installed, you can use the  npm run dev command to compile the front resources, Webpack is provided for modern JavaScript application modules tied up, when you perform  npm run dev when the command, Webpack will execute webpack.mix.js instructions:

npm run dev

     By default, Laravel own  webpack.mix.js will compile and SASS  resources/js/app.js files in  app.js the file you can register Vue assembly, or if you prefer other JavaScript frameworks, you can configure your own JavaScript applications. Compiled JavaScript files are usually stored in the  public/js directory.

Note: The app.js file will be loaded  resources/js/bootstrap.js in order to start and configure the Vue, Axios, jQuery and other JavaScript-dependent all, if you have an extra need JavaScript dependent on configuration, operating here.

   Write Vue assembly

     By default, Laravel newly installed application will  resources/js/components contain a directory Vue component  ExampleComponent.vue, this component is a single file Vue Vue Examples of components, which defines the relevant JavaScript and HTML templates, single-file components to build JavaScript-driven application provides convenience. In this example, the component  app.js is registered:

Vue.component(
    'example', 
    require('./components/ExampleComponent.vue')
);

     To use this component in the application, and need to be thrown into an HTML template. For example, in the run finished Artisan command  make:auth after creating the login and registration view, this component can be thrown Blade templates  home.blade.phpin:

@extends('layouts.app')

@section('content')
    <example-component></example-component>
@endsection

Note: Remember, every time run a modified Vue component  npm run dev command, or you can run the  npm run watch command to listen, you can recompile automatically once the component is modified.

     If you are interested in writing Vue component, you can go read Vue documents , which have a more comprehensive understanding of the Vue framework.

   Use React

     If you prefer to use React to build JavaScript applications, switching from Vue in Laravel to React scaffolding scaffolding is also very simple, in all Laravel newly installed application, use the tape  react option  preset command:

php artisan preset react

     This command will be removed Vue scaffolding code and replace React scaffolding code contains a sample component.