Laravel 中使用 Vue 组件化开发(配置)
来源:互联网 发布:雅思听力知乎 编辑:程序博客网 时间:2024/05/21 06:41
现今前端组件化开发、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
:
<template> <div id="app"> <router-view></router-view> </div></template>
3. 在 js
文件夹下创建 components/Example.vue
文件
Example.vue
:
<template> <h1>{{ msg }}</h1></template><script> export default { data () { return { msg: 'This is a Example~!' } } }</script>
到此 vue
的配置已完成,接下来需要配置一下 Laravel
, 让 Laravel
成功引导到Vue
步骤四:定义路由、编译合并 JS
代码
1. 定义路由,在 app/Http/routes.php
加入:
Route::get('example', function () { return view('example');});
2. 创建 example.blade.php
模板
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Example</title></head><body> <div id="app"></div> <script src="{{ asset('js/main.js') }}"></script></body></html>
3. 编译合并 JS
代码
在命令行下,输入:
gulp
如需实时编译,可输入 gulp watch
步骤五:访问
最后通过浏览器访问:http://laravel.app/example
- Laravel 中使用 Vue 组件化开发(配置)
- vue+webpack 组件化开发基本配置
- Vue中使用组件
- vue开发(一)组件化开发
- laravel 中使用ajax和vue总结
- 全栈开发:前后端分离配置篇(vue+webpack+mock+nginx+laravel)
- 基于 Laravel 开发 社群系统ThinkSNS+ 中前端的抉择(webpack/Vue)踩坑日记
- vue 2.0开发项目中stylus 的配置和使用
- Vue全局组件开发,Vue.use(xxx)一次引入,全局使用 【Vue 非父子组件通信】
- vue中component组件的props使用
- vue中动态组件的使用
- 在vue组件中使用axios
- 使用Vue开发网站之路2-多组件通信3(父子间通信,组件与vue通信)
- vue-cli开发vue项目1组件化开发
- vue中vue-schart(图表组件)的使用
- Vue单页应用开发流程 (Laravel + Vue + Laravel-mix)
- laravel中redis的配置和使用
- laravel中redis 的配置和使用
- 七夕节
- Python——str字符串和unicode字符串
- debian系统下安装ssh
- 使用OLAMI自然语言开放平台提供的API接口制作自己的语音助手
- SVN简单介绍
- Laravel 中使用 Vue 组件化开发(配置)
- 关于选择器的总结与整理
- 死锁
- Django实现的一个简单的后台开发
- 【Codeforces 822 C. Hacker, pack your bags!】+ pair
- 芯片检测问题
- wpf问题~命名空间问题
- 设计模式学习—享元模式(Flyweight Design Pattern)
- PAT 1005继续(3n+1)猜想