laravel5.5 + vue2.* +element-ui

一 首先修改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, }); ```

1. App.vue文件

```

//使用组件


            //展示区


            footer






import Nav from "./../components/Nav.vue"//引入components中的Nav组件
export default {
    components:{
        Nav,
    },
    name:"app",
}




.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;
}

```

1. Home.vue(About.vue与之类似)

```

This is the homepage




export default {
    name: "home"
}

```

1. Nav.vue

```

主页


            我的工作台
            选项1
            选项2
            选项3

                选项4
                选项1
                选项2
                选项3


        消息中心

            about






export default {
    name:"Nav",
    data() {
        return {
            activeIndex: '1',
        };
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}



a{
    text-decoration:none;
}
.navclass{
    padding-left: 150px;
    padding-right: 150px;
}

```

1. 新建spa.blade.php文件并创建控制器(php make:controller SpaController)在web.php中添加路由,并在SpaController.php中添加

Route::get('/{any}', 'SpaController@index')->where('any', '.*');

public function index(){ return view('spa'); }

1. spa.blade.php文件中使用vue的组件

```

Vue SPA Demo

```

三。运行：两个命令行：

npm run watch //可以监控页面的变化

php artisan serve //运行程序

四 运行的效果