Laravel 5.1 中使用 Vue2.0 组件化开发（配置）
fk2005
8年前
<p>现今前端组件化开发、MVVM 模式，给开发带来了很多的便利，可读性、可维护性更高。然而自Laravel 5.3 开始，VueJS 成为框架默认的标配。</p> <p>本文基于 Laravel 5.1 LTS 版本引入 Vue 2.0 进行配置。</p> <p>我已在 Github 配置好，Clone 下来后按照 README 安装依赖后即可用： <a href="/misc/goto?guid=4959676941091465694" rel="nofollow,noindex">https://github.com/jcc/vue-laravel-example</a></p> <h3>步骤一：配置package.json</h3> <p>在根目录下修改 package.json , 可在 devDependencies 下配置你所需的所有依赖。我的配置如下：</p> <pre> <code class="language-javascript">{ "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" } }</code></pre> <p>安装配置的依赖，在根目录下，运行：</p> <pre> <code class="language-javascript">npm install</code></pre> <p>当然你可以通过 npm install {package_name} --save-dev 的方式安装你所需的包。</p> <h3>步骤二：配置 gulpfile.js</h3> <p>Laravel 5.1 的 gulpfile.js 内容如下：</p> <pre> <code class="language-javascript">var elixir = require('laravel-elixir'); elixir(function(mix) { mix.sass('app.scss'); });</code></pre> <p>可见还没使用 ES6 的语法，因此我们修改如下：</p> <pre> <code class="language-javascript">const elixir = require('laravel-elixir'); require('laravel-elixir-vue'); elixir(mix => { mix.webpack('main.js'); });</code></pre> <p>mix.webpack('main.js') 是将 resources/assets/js 下的所有文件进行编译合并，合并到 public/js/main.js 文件。</p> <h3>步骤三：配置 Vue 并创建基础例子</h3> <p>在 resources/assets 文件夹下 创建 js/main.js 文件，该文件主要引入 vue 、 vue-router 等所需的包。</p> <p>main.js ：</p> <pre> <code class="language-javascript">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')</code></pre> <p>由于 vue-router 需要Vue.js 0.12.10+ 并不支持 Vue.js 2.0，因此以上的是根据 vue-router v2.0.0+ 的版本配置，配置跟 0.12.10+ 有明显区别。</p> <p>在 js 文件夹下创建 App.vue 文件</p> <p>App.vue ：</p> <pre> <code class="language-html"><template> <div id="app"> <router-view></router-view> </div> </template></code></pre> <p>在 js 文件夹下创建 components/Example.vue 文件</p> <p>Example.vue ：</p> <pre> <code class="language-html"><template> <h1>{{ msg }}</h1> </template> <script> export default { data () { return { msg: 'This is a Example~!' } } } </script></code></pre> <p>到此 vue 的配置已完成，接下来需要配置一下 Laravel, 让 Laravel 成功引导到 Vue</p> <h3>步骤四：定义路由、编译合并 JS 代码</h3> <p>定义路由，在 app/Http/routes.php 加入：</p> <pre> <code class="language-javascript">Route::get('example', function () { return view('example'); });</code></pre> <p>创建 example.blade.php 模板：</p> <pre> <code class="language-html"><!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></code></pre> <p>最后编译合并 JS 代码，在命令行下，输入：</p> <pre> <code class="language-javascript">gulp</code></pre> <p>如需实时编译，可输入 gulp watch</p> <h3>步骤五：访问</h3> <p>最后通过浏览器访问： http://laravel.app/example</p> <p><img src="https://simg.open-open.com/show/e553166404699a4853d3e336b95f6d45.png"></p> <p><a href="/misc/goto?guid=4959676941180763306" rel="nofollow,noindex">Laravel5.1 + Vue2.0 组件化配置</a></p> <p><a href="/misc/goto?guid=4959676941091465694" rel="nofollow,noindex">https://github.com/jcc/vue-laravel-example</a></p> <p><em>更多请关注 <a href="/misc/goto?guid=4959676941274326649" rel="nofollow,noindex">Laravel.so</a> 、 <a href="/misc/goto?guid=4959676941355512396" rel="nofollow,noindex">PIGJIAN BLOG</a> </em></p> <p> </p> <p>来自：http://laravelacademy.org/post/5656.html</p> <p> </p> <p><span style="background:rgb(189, 8, 28) url("data:image/svg+xml; border-radius:2px; border:medium none; color:rgb(255, 255, 255); cursor:pointer; display:none; font:bold 11px/20px "Helvetica Neue",Helvetica,sans-serif; left:30px; opacity:0.85; padding:0px 4px 0px 0px; position:absolute; text-align:center; text-indent:20px; top:3206px; width:auto; z-index:8675309">Save</span></p>