本教程介绍在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自定义组件文件，代码如下。
export default{ data(){ return { } } }Hello World!
在/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,做为主界面，嵌套路由视图，代码如下。
百度文心百中
百度大模型语义搜索体验中心
22 查看详情
export default{ data(){ return { } } }Hello
接着在/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，代码如下。
Hello
在/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的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/371190.html
微信扫一扫 
支付宝扫一扫 
