83

GitHub - yyx990803/laravel-vue-cli-3: Example project using Vue CLI 3 with Larav...

 6 years ago
source link: https://github.com/yyx990803/laravel-vue-cli-3
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

README.md

Laravel + Vue CLI 3

This demo assumes you are serving this Laravel app via Valet at laracon.test. If you are serving the laravel app at a different local URL, modify it accordingly in frontend/vue.config.js.

To Run the Frontend

cd frontend
yarn # OR npm install
yarn serve # OR npm run serve

# build for production:
yarn build # OR npm run build

Steps for Scaffolding From Scratch

  1. Create Laravel Project

    laravel new my-project
cd my-project

# remove existing frontend scaffold
rm -rf package.json webpack.mix.js yarn.lock resources/assets

  2. Create a Vue CLI 3 project in the Laravel app

    vue create frontend
# pick router

  3. Configure Vue project

    Create frontend/vue.config.js:

    module.exports = {
  // proxy API requests to Valet during development
  // adjust according to your dev setup
  devServer: {
    proxy: 'http://laracon.test'
  },

  // output built static files to Laravel's public dir.
  // note the "build" script in package.json needs to be modified as well.
  outputDir: '../public',

  // modify the location of the generated HTML file.
  // make sure to do this only in production.
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugin('html').tap(opts => {
        opts[0].filename = '../resources/views/index.blade.php'
        return opts
      })
    }
  }
}

    Edit frontend/package.json:

    "scripts": {
  "serve": "vue-cli-service serve",
- "build": "vue-cli-service build",
+ "build": "rm -rf ../public/{js,css,img} && vue-cli-service build --no-clean",
  "lint": "vue-cli-service lint"
},

  4. Configure Laravel for single-page app.

    routes/web.php

    <?php

Route::get('/{any}', 'SpaController@index')->where('any', '.*');

    app/Http/Controllers/SpaController.php

    <?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SpaController extends Controller
{
    public function index()
    {
        return view('index');
    }
}

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK