laravel-vue-cli-3

> 编程语言

开源

使用 Vue CLI 3 与 Laravel 的示例项目

841 stars0 点赞1 次浏览

访问官网 GitHub

工具介绍

使用 Vue CLI 3 与 Laravel 的示例项目

Laravel + Vue CLI 3

此演示假设您通过 Valet 在 laracon.test 上服务此 Laravel 应用。如果您在不同的本地 URL 上服务 laravel 应用，请在 frontend/vue.config.js 中进行相应修改。

运行前端

bash

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

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

从头开始搭建框架的步骤

创建 Laravel 项目

bash

    laravel new my-project
    cd my-project

    # remove existing frontend scaffold
    rm -rf package.json webpack.mix.js yarn.lock resources/assets
    ```
2. 在 Laravel 应用中创建一个 Vue CLI 3 项目
``` sh
    vue create frontend
    # pick router
    ```
3. 配置 Vue 项目
创建 `frontend/vue.config.js`:
``` js
    module.exports = {
      // proxy API requests to Valet during development
      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.
      indexPath: process.env.NODE_ENV === 'production'
        ? '../resources/views/index.blade.php'
        : 'index.html'
    }
    ```
编辑 `frontend/package.json`:
``` diff
    "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. 为单页面应用程序配置 Laravel。
**routes/web.php**
``` php
    where('any', '.*');
    ```
**app/Http/Controllers/SpaController.php**
``` php
    <?php

    namespace App\Http\Controllers;

    use Illuminate\Http\Request;

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