vue与laravel

时间 2019-12-05

标签 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

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