laravel5.5 + vue2.* +element-ui
in PHP with 3 comments

laravel5.5 + vue2.* +element-ui

in PHP with 3 comments

一 首先修改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文件
<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>
  1. Home.vue(About.vue与之类似)
<template>
    <h1>This is the homepage</h1>
</template>


<script>
    export default {
        name: "home"
    }
</script>

<style scoped>

</style>
  1. 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>
  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的组件
<!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>
</body>
</html>

三。运行:两个命令行:

npm run watch //可以监控页面的变化
php artisan serve //运行程序
四 运行的效果

运行效果

Responses
  1. Buy Propecia Online India Safe Generic Propecia Finasteride viagra online prescription Cialis Once A Day

    Reply
  2. 25 charging traumatic pistols shooting automatic fire! Modified Makarov pistols with a silencer! Combat Glock 17 original or with a silencer! And many other types of firearms without a license, without documents, without problems!
    Detailed video reviews of our products you can see on our website.
    http://gunrussia.pw/
    If the site is unavailable or blocked, email us at - Gunrussia@secmail.pro or Gunrussia@elude.in
    And we will send you the address of the backup site!

    Reply
  3. Hy there, Look what we arrange in the service of you! an distinguishedoffers
    Right-minded click on the component below to ready

    https://drive.google.com/file/d/1bQp-bp8Z52cnnZRDzTYp7qplK_SVLgMy/preview

    Reply