< 返回技术文档列表

如何在Laravel中部署vue

发布时间:2021-11-07 03:19:29⊙投诉举报

这篇文章主要介绍“如何在Laravel中部署vue”,在日常操作中,相信很多人在如何在Laravel中部署vue问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何在Laravel中部署vue”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

Laravel+vue之环境部署

本教程介绍在Laravel中部署vue,在Laravel包含了一些基本脚手架,以便使用Vue库更容易开始编写现代JavaScript 。Vue为使用组件构建强大的JavaScript应用程序提供了富有表现力的API。我们可以使用Laravel Mix轻松地将JavaScript组件编译成一个可以浏览器的JavaScript文件。

创建laravel

首先,你要有一个composer,然后,你便有了一个laravel。 运行命令composer create-project --prefer-dist laravel/laravel blog创建一个新的laravel项目。

Hello world!

打开命令行,进入你的项目内cd blog

在开始前,由于各种你懂得原因,npm作为国外的node仓库安装工具,操作的时候可能会发生速度慢等各种问题,一般推荐用taobao源进行加速,后面代码同样加上后缀即可,下载项目默认依赖,代码如下。

npm install  --registry=https://registry.npm.taobao.org

下载vue路由管理,代码如下。

npm install vue-router --save-dev

在/resources/assets/js/components中新建一个HelloComponent.vue自定义组件文件,代码如下。

<template>
    <div>
        <h2>Hello World!</h2>
    </div>
</template>
<script>
    export default{
        data(){
            return {
            }
        }
    }
</script>

在/resources/assets/js下新建文件夹router,并在里面新建hello.js,并通过嵌套路由配置将hello路由映射到刚刚新创建的HellowComponent组件当中,代码如下。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
    saveScrollPosition: true,
    routes: [
        {
            name: "hello",
            path: '/',
            component: resolve =>void(require(['../components/HelloComponent.vue'], resolve))
        },
    ]
})

在当前laravel项目中/resources/assets/js下新建hello.vue,做为主界面,嵌套路由视图,代码如下。

<template>
    <div>
        <h2>Hello</h2>
        <router-view></router-view>
    </div>
</template>
<script>
    export default{
        data(){
            return {
            }
        }
    }
</script>

接着在/resources/assets/js下新建hello.js,代码如下。

require('./bootstrap');
window.Vue = require('vue');
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/views下新建hello.blade.php,代码如下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Hello</title>
</head>
<body>
    <div id="app"></div>
    <script src="{{ mix('js/manifest.js') }}"></script>
    <script src="{{ mix('js/vendor.js') }}"></script>
    <script src="{{ mix('js/hello.js') }}"></script>
</body>
</html>

在/resources/routes/web.php中新增路由,代码如下。

Route::view('/hello','/hello');

修改webpack.mix.js,代码如下。

mix.js('resources/assets/js/app.js', 'public/js')
   .js('resources/assets/js/hello.js', 'public/js')
   .extract(['vue', "vue-router", "axios"])
   .sass('resources/assets/sass/app.scss', 'public/css');

保存后在命令行中本项目目录下执行npm run watch,进行重新编译

可以在命令行中本项目目录下输入php artisan serve,访问http://127.0.0.1:8000/hello即可看到效果

laravel5.5起新增了Route::view和Route::redirect方法,5.4及以下的路由可以写成这样Route::get('/hello', function () {return view('hello');});

到此,关于“如何在Laravel中部署vue”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注血鸟云网站,小编会继续努力为大家带来更多实用的文章!


/template/Home/Zkeys/PC/Static