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

時間 2019-11-07

標籤 laravel 使用 vue 組件開發配置简体版

原文原文鏈接

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

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

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

步驟一：配置 `package.json`

1. 在根目錄下修改 package.json, 可在 devDependencies 下配置你所需的全部依賴。個人配置以下：vue

{
  "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. 安裝配置的依賴，在根目錄下，運行：jquery

npm install

固然你能夠經過 npm install {package_name} --save-dev 的方式安裝你所需的包。webpack

步驟二：配置 `gulpfile.js`

Laravel 5.1 的 gulpfile.js 內容以下：laravel

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

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

可見還沒使用 ES6 的語法，所以咱們修改以下：git

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 文件。github

步驟三：配置 `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：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

Example.vue：

<template>
  <h1>{{ msg }}</h1>
</template>

<script>
  export default {
    data () {
      return {
        msg: 'This is a Example~!'
      }
    }
  }
</script>

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

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

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

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

2. 建立 example.blade.php 模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
<body>
  <div id="app"></div>

  <script src="{{ asset('js/main.js') }}"></script>
</body>
</html>

3. 編譯合併 JS 代碼

在命令行下，輸入：