laravel没有内置vue;laravel是使用php语言编写的网页程序开发框架,而vue是一个用于创建用户界面的开源javascript框架,可以在laravel中部署vue,但是laravel中并不存在内置vue。
本文操作环境:windows10系统、laravel9版、dell g3电脑。
laravel内置了vue吗laravel 是使用 php 语言编写的网页程序开发框架,目的是为开发者提供常用组件,简化网页程序的开发。只需编写较少的代码,就能实现其他编程语言或框架难以企及的功能。经验丰富的 php 程序员会发现,laravel 让程序开发变得更有乐趣。
vue是一个用于创建用户界面的开源javascript框架,也是一个创建单页应用的web应用框架;vue所关注的核心是mvc模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。
laravel
laravel 是一套富有表达性且具有简洁语法的网页应用程序框架。我们认为开发过程应该是愉悦且有创造性的体验。laravel 努力减少开发过程中的不便,因此我们提供了验证(authentication)、路由(routing)、sessions、缓存(caching)等开发过程中经常用到的工具或功能。
laravel 目标是给开发者创造一个愉快的开发过程,并且不牺牲应用程序的功能性。快乐的开发者才能创造最棒的代码。为了这个目的,我们竭取了各框架的优点集中到 laravel 中,这些框架包括并不局限于 ruby on rails、asp.net mvc 和 sinatra 等。
vue
vue.js(/vjuː/,或简称为vue)是一个用于创建用户界面的开源javascript框架,也是一个创建单页应用的web应用框架。 2016年一项针对javascript的调查表明,vue有着89%的开发者满意度。在github上,该项目平均每天能收获95颗星,为github有史以来星标数第3多的项目。
vue.js是一款流行的javascript前端框架,旨在更好地组织与简化web开发。vue所关注的核心是mvc模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。
怎么在laravel中部署vue
创建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');});
【相关推荐:laravel视频教程】
以上就是laravel内置了vue吗的详细内容。