在 Laravel 中使用vue（一）

星期六, 2017-04-22 12:48 — adminshiping1

假设你已经搭建好 Laravel 环境

Vue.js

2016年，前端框架层出不穷，做一个项目之前，我们的技术栈有了更多的选择。Vue就是一个前端框架，类似Angular,React,Ember。

Vue.js 是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

—— 官方描述

如果到现在为止，你都没接触过Vue的话，那么建议你花点时间入坑。

在项目中使用Vue

官方出了个工具， vue-cli ，他可以帮你快速地构建一个Vue的开发环境：单vue文件，热加载，代码检查，单元测试等等。

为了让项目模块化，官方推荐搭配是 webpack + vue-loarder 或者 Browserify + vueify。选择哪种构建工具取决于你的经验和需求。Webpack 的功能更强大，如代码分割，将静态资源当作模块，提取组件的 CSS 到单独的一个文件等，不过它的配置相对复杂一点。如果你不需要 Webpack 的那些功能，使用 Browserify 更简单。

这篇文章我们主要讲如何在Laravel 中快速使用vue 进行开发，所以使用的是 Browserify + vueify。

npm install

安装完 laravel，先在你的项目根目录执行 npm install ，这条命令会根据package.json中的配置安装所需依赖。

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

laravel 中自带了一个库叫 laravel-elixir ，它提供了非常简洁的API，让你能快速处理 gulp 任务。

而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>