如何在Laravel中部署vue

这篇文章主要介绍“如何在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自定义组件文件，代码如下。

在/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,做为主界面，嵌套路由视图，代码如下。

接着在/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，代码如下。