假設你已經搭建好 Laravel 環境html
2016年,前端框架層出不窮,作一個項目以前,咱們的技術棧有了更多的選擇。
Vue就是一個前端框架,相似Angular,React,Ember。前端
Vue.js 是一個構建數據驅動的 web 界面的庫。Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。
Vue.js 自身不是一個全能框架——它只聚焦於視圖層。所以它很是容易學習,很是容易與其它庫或已有項目整合。另外一方面,在與相關工具和支持庫一塊兒使用時,Vue.js 也能完美地驅動複雜的單頁應用。vue—— 官方描述webpack
若是到如今爲止,你都沒接觸過Vue的話,那麼建議你花點時間入坑。laravel
官方出了個工具,vue-cli,他能夠幫你快速地構建一個Vue的開發環境:單vue文件,熱加載,代碼檢查,單元測試等等。git
爲了讓項目模塊化,官方推薦搭配是 webpack + vue-loarder 或者 Browserify + vueify。選擇哪一種構建工具取決於你的經驗和需求。Webpack 的功能更強大,如代碼分割,將靜態資源看成模塊,提取組件的 CSS 到單獨的一個文件等,不過它的配置相對複雜一點。若是你不須要 Webpack 的那些功能,使用 Browserify 更簡單。github
這篇文章咱們主要講如何在Laravel 中快速使用vue 進行開發,因此使用的是 Browserify + vueify。web
安裝完 laravel, 先在你的項目根目錄執行 npm install
,這條命令會根據package.json中的配置安裝所需依賴。vue-cli
{ |
laravel 中自帶了一個庫叫 laravel-elixir,它提供了很是簡潔的API,讓你能快速處理 gulp 任務。npm
而laravel-elixir 中又依賴了不少庫,好比 Sass, Less, Babel, CoffeeScript,等等,可是全部這些,你只須要在根目錄 npm i
一下便可(依賴太多,一般都會好久)。
接着安裝vueify相關依賴
npm i vue vueify babel-plugin-transform-runtime --save-dev |
爲了讓 laravel-elixir 自帶的browserify 可以解析vue,在 package.json 中修改browserify配置
{ |
接着在resources/assets/js下面增長如下兩個文件夾,entries存放,入口文件js,views文件夾存放vue項目入口。
.
├── entries
│ └── hello.js
└── views
└── Hello.vue |
入口文件的做用只是起到提供一個建立vue實例的做用。
import Vue from 'vue'; |
views 下就是單個Vue文件了
<template>
<h1>Hello Vue</h1>
</template>
<style>
</style>
<script>
export default {
el() {
return '#app'
}
}
</script> |
最後,修改Laravel blade 文件,引入js
<html> |
執行 gulp watch 命令(laravel-elixir 自帶的),打開頁面就能看到效果啦(撒花~)
轉載:http://w3ctrain.com/2016/06/08/vue-in-laravel/?utm_source=tuicool&utm_medium=referral