国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Laravel 中使用 Vue 組件化開發(fā)（配置）

BWrong / 2494人閱讀

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

更多請關(guān)注Laravel.so、PIGJIAN BLOG

現(xiàn)今前端組件化開發(fā)、MVVM 模式，給開發(fā)帶來了很多的便利，可讀性、可維護(hù)性更高。然而自 Laravel 5.3 開始，VueJS 成為框架默認(rèn)的標(biāo)配。

本文基于 Laravel 5.1 LTS 版本引入 Vue 2.0 進(jìn)行配置。

我已在 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

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

步驟二：配置 gulpfile.js

Laravel 5.1 的 gulpfile.js 內(nèi)容如下：

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 下的所有文件進(jìn)行編譯合并，合并到 public/js/main.js 文件。

步驟三：配置 Vue 并創(chuàng)建基礎(chǔ)例子

1. 在 resources/assets 文件夾下 創(chuàng)建 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，因此以上的是根據(jù) vue-router v2.0.0+ 的版本配置，配置跟 0.12.10+ 有明顯區(qū)別。

2. 在 js 文件夾下創(chuàng)建 App.vue 文件

App.vue：

3. 在 js 文件夾下創(chuàng)建 components/Example.vue 文件

Example.vue：

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

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

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

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

2. 創(chuàng)建 example.blade.php 模板




  
  Example

3. 編譯合并 JS 代碼

在命令行下，輸入：

gulp

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

步驟五：訪問

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

Laravel5.1 + Vue2.0 組件化配置
https://github.com/jcc/vue-laravel-example

更多請關(guān)注Laravel.so、PIGJIAN BLOG

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/80108.html

相關(guān)文章

  • Laravel 中使用 Vue 組件化開發(fā)（配置）

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

    honhon 評論0 收藏0

  • 【Laravel+Apicloud+Vue開發(fā)混合式App系列】第0集

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

    Corwien 評論0 收藏0

  • 【Laravel+Apicloud+Vue開發(fā)混合式App系列】第0集

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

    adie 評論0 收藏0

  • Laravel 和 Vue 的項目搭建：基礎(chǔ)篇

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

    jiekechoo 評論0 收藏0

  • [譯]如何基于Laravel構(gòu)建Vue應(yīng)用（一）

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

    Rocko 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<