Today front-end component development, MVVM mode, to the development of a lot of convenience, readability, maintainability is higher. Since Laravel 5.3, however, Vuejs becomes the default standard for frames.
This article is based on the Laravel 5.1 LTS version introduced Vue 2.0 for configuration.
I have been configured in the Github, Clone down after the following README installation depends on the use:
Https://github.com/jcc/vue-laravel-example
Step One: Configure PACKAGE. Json
1. Modify the Package.json under the root directory to configure all the dependencies you need under Devdependencies. My configuration is as follows:
{
' 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. Installation configuration dependencies, under the root directory, run:
NPM Install
Of course you can install the package you need through the NPM install {package_name}--save-dev.
Step Two: Configure Gulpfile. Js
The gulpfile.js contents of Laravel 5.1 are as follows:
var elixir = require (' Laravel-elixir ');
Elixir (function (Mix) {
Mix.sass (' app.scss ');
});
The syntax of ES6 is not yet used, so we modify it as follows:
CONST ELIXIR = require (' Laravel-elixir ');
Require (' Laravel-elixir-vue ');
Elixir (Mix => {
Mix.webpack (' main.js ');
});
Mix.webpack (' main.js ') compiles and merges all the files under Resources/assets/js into public/js/main.js files.
Step Three: Configure VUE and create a basic example
1. Create a js/main.js file under the Resources/assets folder, which mainly introduces the required packages for Vue, vue-router, etc.
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 ')
Because Vue-router needs vue.js 0.12.10+ does not support Vue.js 2.0, the above is based on Vue-router v2.0.0+ version configuration, configuration and 0.12.10+ are significantly different.
2. Create the App.vue file under the JS folder
App.vue:
<template>
<div id= "App" >
<router-view></router-view>
</div>
</template>
3. Create the Components/example.vue file under the JS folder
Example.vue:
<template>
</template>
<script>
Export Default {
Data () {
return {
Msg: ' This is a example~! '
}
}
}
</script>
The configuration for this Vue is complete, and the next step is to configure the Laravel to allow Laravel to successfully boot to Vue
Step four: Define routing, compile merge JS code
1. Define routing, add in app/http/routes.php:
Route::get (' Example ', function () {
Return view (' example ');
});
2. Create example.blade.php Template
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Example</title>
<body>
<div id= "App" ></div>
<script src= "{{asset (' Js/main.js ')}}" ></script>
</body>
3. Compile Merge JS code
At the command line, enter:
Gulp
For real-time compilation, you can enter Gulp watch
Step Five: Access
Last accessed via browser: http://laravel.app/example
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
