rhildred/README.md

## README.md

      
    Raw
  

              README.md
            
          
    To get Larval 8 running on Windows


Use this article to install php and composer
edit the php.ini file to uncomment fileinfo

extension=curl
;extension=ffi
;extension=ftp
extension=fileinfo


create the project composer create-project --prefer-dist laravel/laravel laravelvue
open your project folder in vscode, start a terminal and run command composer require laravel/ui
run php artisan ui vue
run npm install
run npm run dev it may prompt you to run twice
run npm run watch (this makes mix use webpack to build app.js and app.css in the public folder). You will need to run this every time
open another terminal and run php artisan serve. You will also need to run this each time.

To show that you can make and see changes


Edit resources/view/welcome.blade.php to have the following contents:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
        <link href="css/app.css" rel="stylesheet" />
    </head>
    <body>
        <div id="app">
            <example-component />
        </div>        
        <script src="js/app.js"></script>
    </body>
</html>


Edit resources/js/component/ExampleComponent.vue to include "Hello World":

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Hello World !! Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>


Surf to http://localhost:8000

This should show your changed component. This Gist was inspired by this tutorial that had a couple of things missing.