Laravel 中使用 Vue 组件化开发（配置）

BWrong 发布于2019-08-20 10:22 / 2448人阅读

摘要：更多请关注现今前端组件化开发模式，给开发带来了很多的便利，可读性可维护性更高。然而自开始，成为框架默认的标配。本文基于版本引入进行配置。我已在配置好，和均有，下来后按照安装依赖后即可用步骤一配置在根目录下修改可在下配置你所需的所有依赖。

更多请关注Laravel.so、PIGJIAN BLOG

现今前端组件化开发、MVVM 模式，给开发带来了很多的便利，可读性、可维护性更高。然而自 Laravel 5.3 开始，VueJS 成为框架默认的标配。

本文基于 Laravel 5.1 LTS 版本引入 Vue 2.0 进行配置。

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

当然你可以通过 npm install {package_name} --save-dev 的方式安装你所需的包。

步骤二：配置 gulpfile.js

Laravel 5.1 的 gulpfile.js 内容如下：

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 下的所有文件进行编译合并，合并到 public/js/main.js 文件。

步骤三：配置 Vue 并创建基础例子

1. 在 resources/assets 文件夹下创建 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，因此以上的是根据 vue-router v2.0.0+ 的版本配置，配置跟 0.12.10+ 有明显区别。

2. 在 js 文件夹下创建 App.vue 文件

App.vue：

3. 在 js 文件夹下创建 components/Example.vue 文件

Example.vue：

到此 vue 的配置已完成，接下来需要配置一下 Laravel, 让 Laravel 成功引导到 Vue

步骤四：定义路由、编译合并 JS 代码

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

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

2. 创建 example.blade.php 模板




  
  Example

3. 编译合并 JS 代码

在命令行下，输入：

gulp

如需实时编译，可输入 gulp watch

步骤五：访问

最后通过浏览器访问：http://laravel.app/example

Laravel5.1 + Vue2.0 组件化配置

https://github.com/jcc/vue-laravel-example

更多请关注Laravel.so、PIGJIAN BLOG

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80108.html

Laravel 中使用 Vue 组件化开发（配置）

摘要：更多请关注现今前端组件化开发模式，给开发带来了很多的便利，可读性可维护性更高。然而自开始，成为框架默认的标配。本文基于版本引入进行配置。我已在配置好，和均有，下来后按照安装依赖后即可用步骤一配置在根目录下修改可在下配置你所需的所有依赖。更多请关注Laravel.so、PIGJIAN BLOG 现今前端组件化开发、MVVM 模式，给开发带来了很多的便利，可读性、可维护性更高。然而自 L...

honhon 2019-06-27 14:18 评论0 收藏0
【Laravel+Apicloud+Vue开发混合式App系列】第0集

摘要：关于作者程序开发人员，不拘泥于语言与技术，目前主要从事和前端开发，使用和，端使用混合式开发。个人网站最近刚写了一个手机在线播放的电影站开发混合式系列第集技术选型是一套简洁优雅的开发框架。关于作者程序开发人员，不拘泥于语言与技术，目前主要从事PHP和前端开发，使用Laravel和VueJs，App端使用Apicloud混合式开发。合适和够用是最完美的追求。个人网站：http://...

Corwien 2019-06-27 15:29 评论0 收藏0
【Laravel+Apicloud+Vue开发混合式App系列】第0集

摘要：关于作者程序开发人员，不拘泥于语言与技术，目前主要从事和前端开发，使用和，端使用混合式开发。个人网站最近刚写了一个手机在线播放的电影站开发混合式系列第集技术选型是一套简洁优雅的开发框架。关于作者程序开发人员，不拘泥于语言与技术，目前主要从事PHP和前端开发，使用Laravel和VueJs，App端使用Apicloud混合式开发。合适和够用是最完美的追求。个人网站：http://...

adie 2019-08-20 14:25 评论0 收藏0
Laravel 和 Vue 的项目搭建：基础篇

摘要：此项目前端使用框架，加上这些常用扩展后的其中还加入了加载器解析工具前端动画等，不需要的可以自行删除。没有的，需要设置淘宝镜像，下载的是国外的镜像，速度慢而且可能出现下载失败的问题。本篇只是实现了基础的功能，对于实际的项目中的权限等还未涉及，这些会在后期逐步完善。相关项目 laravel-vue-iview 的 GitHub 地址戳这里，此项目基本可用于实际开发工作。 Lara...

jiekechoo 2019-06-28 18:24 评论0 收藏0
[译]如何基于Laravel构建Vue应用（一）

摘要：使用能优雅的构建并且与单页面应用程序完美结合。我们将重点关注所需的所有部分，然后在后续教程中，我们将进一步演示如何使用作为层。例如，如果用户刷新路由，我们将需要匹配该路由并返回应用程序模板。运行应用程序该基础用于构建具有和路由器的。使用Laravel能优雅的构建API并且与Vue单页面应用程序（SPA）完美结合。在本教程中，我们将展示如何启动和运行Vue路由器以及用于构建SPA的La...

Rocko 2019-07-01 12:42 评论0 收藏0