Laravel 中使用 Vue 組件化開發（配置）

honhon 發布于2019-06-27 14:18 / 1141人閱讀

摘要：更多請關注現今前端組件化開發模式，給開發帶來了很多的便利，可讀性可維護性更高。然而自開始，成為框架默認的標配。本文基于版本引入進行配置。我已在配置好，和均有，下來后按照安裝依賴后即可用步驟一配置在根目錄下修改可在下配置你所需的所有依賴。

更多請關注Laravel.so、PIGJIAN BLOG

現今前端組件化開發、MVVM 模式，給開發帶來了很多的便利，可讀性、可維護性更高。然而自 Laravel 5.3 開始，VueJS 成為框架默認的標配。

本文基于 Laravel 5.1 LTS 版本引入 Vue 2.0 進行配置。

我已在 Github 配置好，Laravel 5.1 和 Laravel 5.2 均有，Clone 下來后按照 README 安裝依賴后即可用：
https://github.com/jcc/vue-laravel-example

步驟一：配置 package.json

1. 在根目錄下修改 package.json, 可在 devDependencies 下配置你所需的所有依賴。我的配置如下：

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue": "^0.1.4",
    "laravel-elixir-webpack-official": "^1.0.2",
    "laravel-elixir-browsersync-official": "^1.0.0",
    "lodash": "^4.14.0",
    "vue": "^2.0.0-rc.2",
    "vue-resource": "^0.9.3",
    "vue-router": "^2.0.0-rc.3"
  }
}

2. 安裝配置的依賴，在根目錄下，運行：

npm install

當然你可以通過 npm install {package_name} --save-dev 的方式安裝你所需的包。

步驟二：配置 gulpfile.js

Laravel 5.1 的 gulpfile.js 內容如下：

var elixir = require("laravel-elixir");

elixir(function(mix) {
    mix.sass("app.scss");
});

可見還沒使用 ES6 的語法，因此我們修改如下：

const elixir = require("laravel-elixir");

require("laravel-elixir-vue");

elixir(mix => {
  mix.webpack("main.js");
});

mix.webpack("main.js") 是將 resources/assets/js 下的所有文件進行編譯合并，合并到 public/js/main.js 文件。

步驟三：配置 Vue 并創建基礎例子

1. 在 resources/assets 文件夾下創建 js/main.js 文件，該文件主要引入 vue 、vue-router 等所需的包。

main.js：

import Vue from "vue/dist/vue.js"
import App from "./App.vue"
import VueRouter from "vue-router"

Vue.use(VueRouter)

import Example from "./components/Example.vue"

const router = new VueRouter({
  mode: "history",
  base: __dirname,
  routes: [
    { path: "/example", component: Example }
  ]
})

new Vue(Vue.util.extend({ router }, App)).$mount("#app")

由于 vue-router 需要 Vue.js 0.12.10+ 并不支持 Vue.js 2.0，因此以上的是根據 vue-router v2.0.0+ 的版本配置，配置跟 0.12.10+ 有明顯區別。

2. 在 js 文件夾下創建 App.vue 文件

App.vue：

3. 在 js 文件夾下創建 components/Example.vue 文件

Example.vue：

到此 vue 的配置已完成，接下來需要配置一下 Laravel, 讓 Laravel 成功引導到 Vue

步驟四：定義路由、編譯合并 JS 代碼

1. 定義路由，在 app/Http/routes.php 加入：

Route::get("example", function () {
    return view("example");
});

2. 創建 example.blade.php 模板




  
  Example

3. 編譯合并 JS 代碼

在命令行下，輸入：

gulp

如需實時編譯，可輸入 gulp watch

步驟五：訪問

最后通過瀏覽器訪問：http://laravel.app/example

Laravel5.1 + Vue2.0 組件化配置

https://github.com/jcc/vue-laravel-example

更多請關注Laravel.so、PIGJIAN BLOG

GPU云服務器云服務器 vue組件開發 vue 中使用 webrtc vue中使用webrtc 在php中使用組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/21914.html

Laravel 中使用 Vue 組件化開發（配置）

摘要：更多請關注現今前端組件化開發模式，給開發帶來了很多的便利，可讀性可維護性更高。然而自開始，成為框架默認的標配。本文基于版本引入進行配置。我已在配置好，和均有，下來后按照安裝依賴后即可用步驟一配置在根目錄下修改可在下配置你所需的所有依賴。更多請關注Laravel.so、PIGJIAN BLOG 現今前端組件化開發、MVVM 模式，給開發帶來了很多的便利，可讀性、可維護性更高。然而自 L...

BWrong 2019-08-20 10:22 評論0 收藏0
【Laravel+Apicloud+Vue開發混合式App系列】第0集

摘要：關于作者程序開發人員，不拘泥于語言與技術，目前主要從事和前端開發，使用和，端使用混合式開發。個人網站最近剛寫了一個手機在線播放的電影站開發混合式系列第集技術選型是一套簡潔優雅的開發框架。關于作者程序開發人員，不拘泥于語言與技術，目前主要從事PHP和前端開發，使用Laravel和VueJs，App端使用Apicloud混合式開發。合適和夠用是最完美的追求。個人網站：http://...

Corwien 2019-06-27 15:29 評論0 收藏0
【Laravel+Apicloud+Vue開發混合式App系列】第0集

摘要：關于作者程序開發人員，不拘泥于語言與技術，目前主要從事和前端開發，使用和，端使用混合式開發。個人網站最近剛寫了一個手機在線播放的電影站開發混合式系列第集技術選型是一套簡潔優雅的開發框架。關于作者程序開發人員，不拘泥于語言與技術，目前主要從事PHP和前端開發，使用Laravel和VueJs，App端使用Apicloud混合式開發。合適和夠用是最完美的追求。個人網站：http://...

adie 2019-08-20 14:25 評論0 收藏0
Laravel 和 Vue 的項目搭建：基礎篇

摘要：此項目前端使用框架，加上這些常用擴展后的其中還加入了加載器解析工具前端動畫等，不需要的可以自行刪除。沒有的，需要設置淘寶鏡像，下載的是國外的鏡像，速度慢而且可能出現下載失敗的問題。本篇只是實現了基礎的功能，對于實際的項目中的權限等還未涉及，這些會在后期逐步完善。相關項目 laravel-vue-iview 的 GitHub 地址戳這里，此項目基本可用于實際開發工作。 Lara...

jiekechoo 2019-06-28 18:24 評論0 收藏0
[譯]如何基于Laravel構建Vue應用（一）

摘要：使用能優雅的構建并且與單頁面應用程序完美結合。我們將重點關注所需的所有部分，然后在后續教程中，我們將進一步演示如何使用作為層。例如，如果用戶刷新路由，我們將需要匹配該路由并返回應用程序模板。運行應用程序該基礎用于構建具有和路由器的。使用Laravel能優雅的構建API并且與Vue單頁面應用程序（SPA）完美結合。在本教程中，我們將展示如何啟動和運行Vue路由器以及用于構建SPA的La...

Rocko 2019-07-01 12:42 評論0 收藏0