laravel + vue

一.先确保安装了Laravel,node，npm 和 cnpm(用于通过淘宝镜像下载 提高下载国外资源的速度)

二.安装

运行npm install即可安装laravel-mix。如果失败的话请使用npm国内镜像。

之后通过 cnpm install --save vue-router 安装vue-router。

三.添加文件

在/resources/assets/js下新建hello.js和hello.vue，内容如下

hello.vue文件

<template>
    <div>
        <h1>Hello</h1>
        <hr>
        <router-view>

        </router-view>
    </div>
</template>


<script>
    export default{
        components : {

        },
        data(){
            return {

            }
        },
        methods : {

        },
        mounted(){

        }
    }
</script>

hello.js文件

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */


require('./bootstrap');

window.Vue = require('vue');


/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
import Vue from 'vue'
import App from './Hello.vue'
import router from './router/hello.js'
const app = new Vue({
    el: '#app',
    router,
    render: h=>h(App)
});

在/resources/assets/js/components下新建文件夹hello，然后在hello文件夹下新建一个test1.vue文件，内容如下

test1.vue

<template>
    <div>
        <h1>test1</h1>
    </div>
</template>

<script>
    export default{
        components : {

        },
        data(){
            return {

            }
        },
        methods : {

        },
        mounted(){

        }
    }
</script>

在/resources/assets/js下新建文件夹router 
在/resources/assets/js/router下新建hello.js

hello.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

export default new VueRouter({
    saveScrollPosition: true,
    routes: [
        {
            name: "test1",
            path: '/',
            component: resolve =>void(require(['../components/hello/test1.vue'], resolve))
        },
    ]
})

在/resources/views下新建hello.blade.php 
hello.blade.php文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Hello</title>
</head>
<body>
<div id="app">

</div>
<!--hello.js是入口js，vendor则是通过提取公共模块插件来提取的代码块（webpack本身带的模块化代码部分），而manifest则是在vendor的基础上，再抽取出要经常变动的部分，比如关于异步加载js模块部分的内容-->
<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/hello.js') .'?'.rand(111111,999999)}}"></script>
<!--加随机数防止浏览器缓存-->

</body>
</html>

在/resources/routes/web.php中 添加

Route::get('/hello', function () {
    return view('hello');
});

在webpack.mix.js中修改

.js('resources/assets/js/hello.js', 'public/js')
.extract(['vue', "vue-router", "axios"])

修改配置并保存后 执行 npm run watch 重新编译

 

posted on 2018-03-05 17:02  小乔流水人家  阅读(336)  评论(0)    收藏  举报

导航