vue與laravel

假設你已經搭建好 Laravel 環境html

Vue.js

2016年,前端框架層出不窮,作一個項目以前,咱們的技術棧有了更多的選擇。
Vue就是一個前端框架,相似Angular,React,Ember。前端

Vue.js 是一個構建數據驅動的 web 界面的庫。Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。
Vue.js 自身不是一個全能框架——它只聚焦於視圖層。所以它很是容易學習,很是容易與其它庫或已有項目整合。另外一方面,在與相關工具和支持庫一塊兒使用時,Vue.js 也能完美地驅動複雜的單頁應用。vue

—— 官方描述webpack

若是到如今爲止,你都沒接觸過Vue的話,那麼建議你花點時間入坑laravel

在項目中使用Vue

官方出了個工具,vue-cli,他能夠幫你快速地構建一個Vue的開發環境:單vue文件,熱加載,代碼檢查,單元測試等等。git

爲了讓項目模塊化,官方推薦搭配是 webpack + vue-loarder 或者 Browserify + vueify。選擇哪一種構建工具取決於你的經驗和需求。Webpack 的功能更強大,如代碼分割,將靜態資源看成模塊,提取組件的 CSS 到單獨的一個文件等,不過它的配置相對複雜一點。若是你不須要 Webpack 的那些功能,使用 Browserify 更簡單。github

這篇文章咱們主要講如何在Laravel 中快速使用vue 進行開發,因此使用的是 Browserify + vueify。web

npm install

安裝完 laravel, 先在你的項目根目錄執行 npm install,這條命令會根據package.json中的配置安裝所需依賴。vue-cli

{
"private": true,
"devDependencies": {
"gulp": "^3.8.8",
"laravel-elixir": "*"
}
}

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

Vue單文件入口

爲了讓 laravel-elixir 自帶的browserify 可以解析vue,在 package.json 中修改browserify配置

{
"private": true,
"devDependencies": {
"gulp": "^3.8.8",
"laravel-elixir": "*",
"babel-plugin-transform-runtime": "^6.9.0",
"vue": "^1.0.24",
"vueify": "^8.5.4"
},
"browserify": {
"transform": [
"vueify"
]
},
}

 

接着在resources/assets/js下面增長如下兩個文件夾,entries存放,入口文件js,views文件夾存放vue項目入口。

.
├── entries
│   └── hello.js
└── views
    └── Hello.vue

入口文件的做用只是起到提供一個建立vue實例的做用。

import Vue from 'vue';
import Hello from '../views/Hello.vue'


Vue.config.debug = true

new Vue(Hello);

views 下就是單個Vue文件了

<template>
  <h1>Hello Vue</h1>
</template>

<style>
</style>

<script>

export default {
  el() {
    return '#app'
  }
}
</script>

最後,修改Laravel blade 文件,引入js

<html>
<head>
<title>Laravel</title>
</head>
<body>
<div id='app'>
</div>
<script src="js/hello.js" charset="utf-8"></script>
</body>
</html>

執行 gulp watch 命令(laravel-elixir 自帶的),打開頁面就能看到效果啦(撒花~)

hello-vue

hello-vue

 

轉載:http://w3ctrain.com/2016/06/08/vue-in-laravel/?utm_source=tuicool&utm_medium=referral

相關文章
相關標籤/搜索