详解怎么在Laravel中部署vue

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

详解怎么在Laravel中部署vue

Laravel+vue之环境部署

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

相关推荐:最新的五个Laravel视频教程、最新的5个vue.js视频教程精选

创建laravel

首先,你要有一个composer,然后,你便有了一个laravel。 运行命令composer create-project --prefer-dist laravel/laravel blog创建一个新的laravel项目(具体创建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>        <h1>Hello World!</h1>    </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>        <h1>Hello</h1>        <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');});

最后

有时候运行npm时会提示Write EIO错误,可能是因为编码的问题造成,这种时候可用管理员身份运行命令行文件,或者运行chcp 850设置活动代码页编号,介绍在laravel中部署vue的教程基本结束,如果您有兴趣了解更多关于编写Vue组件的信息,你可以阅读Vue文档,就酱。

以上就是详解怎么在Laravel中部署vue的详细内容,更多请关注9543建站博客其它相关文章!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。
作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:图文详解apache2.4+php8.0的安装配置方法
下一篇:如何用PHP正则表达式验证密码格式

发表评论

关闭广告
关闭广告