一 首先修改packgae.json并下载依赖库
1 。 laravel自带vue ，只需要添加 vue-router vuex vue-resource element-ui
2 。 然后进入命令行执行 npm install 进行依赖的安装
二 安装好依赖之后开始使用
文件目录 在进行下一步之前先把文件创建好
1. 找到resource/assets/js文件夹,在app.js中进行编辑，（这个文件相当于vue中的main.js），文件中有的代码均可以删除。具体详见代码注释。
import Vue from 'vue' //引入vue import VueRouter from 'vue-router'//引入vue-router import ElementUI from 'element-ui';//引入element-ui import 'element-ui/lib/theme-chalk/index.css'; Vue.use(VueRouter)//使用vue-router Vue.use(ElementUI)//使用element-ui import App from './views/App' //加载views文件夹下的App组件 import About from './views/About'//同上 import Home from './views/Home'//同上 const router = new VueRouter({//定义路由 mode: 'history', routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'About', component: About, }, ], }); const app = new Vue({//实例化Vue el: '#app', components: { App }, router, });
- App.vue文件
<template> <div> <el-container> <el-header> <Nav></Nav>//使用组件 </el-header> <el-main> <router-view></router-view>//展示区 </el-main> <el-footer> footer </el-footer> </el-container> </div> </template> <script> import Nav from "./../components/Nav.vue"//引入components中的Nav组件 export default { components:{ Nav, }, name:"app", } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .el-header { padding: 50px 0px 100px 0px; background-color: #B3C0D1; color: #333; } .el-footer{ background-color: #B3C0D1; color: #333; } .el-main { background-color: #E9EEF3; color: #333; text-align: center; width: 100%; height: 500px; } .el-container { margin-bottom: 40px; } </style>
- Home.vue(About.vue与之类似)
<template> <h1>This is the homepage</h1> </template> <script> export default { name: "home" } </script> <style scoped> </style>
- Nav.vue
<template> <div class="navclass"> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="1"> <router-link to="/">主页</router-link> </el-menu-item> <el-submenu index="2"> <template slot="title">我的工作台</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项1</el-menu-item> <el-menu-item index="2-4-2">选项2</el-menu-item> <el-menu-item index="2-4-3">选项3</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="3">消息中心</el-menu-item> <el-menu-item index="4"> <router-link to="/about" >about</router-link> </el-menu-item> </el-menu> </div> </template> <script> export default { name:"Nav", data() { return { activeIndex: '1', }; }, methods: { handleSelect(key, keyPath) { console.log(key, keyPath); } } } </script> <style scoped> a{ text-decoration:none; } .navclass{ padding-left: 150px; padding-right: 150px; } </style>
- 新建spa.blade.php文件并创建控制器（php make:controller SpaController）在web.php中添加路由,
Route::get('/{any}', 'SpaController@index')->where('any', '.*');• 1
并在SpaController.php中添加
public function index(){ return view('spa'); }
- spa.blade.php文件中使用vue的组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue SPA Demo</title> </head> <body> <div id="app"> <app></app> </div> <script src="{{ asset('js/app.js') }}"></script>//引入vue </body> </html>
三 运行：两个命令行：
npm run watch //可以监控页面的变化• 1
php artisan serve //运行程序• 1
四 运行的效果
