Does laravel have vue built-in?

Laravel does not have built-in vue; laravel is a web program development framework written in PHP language, and vue is an open source JavaScript framework for creating user interfaces. Vue can be deployed in laravel, but it does not exist in laravel Built-in vue.

#The operating environment of this article: Windows 10 system, Laravel version 9, Dell G3 computer.

Does laravel have vue built-in?

Laravel is a web program development framework written in PHP language. The purpose is to provide developers with common components and simplify the development of web programs. By writing less code, you can achieve features that are difficult to achieve with other programming languages ​​or frameworks. Experienced PHP programmers will find that Laravel makes program development more fun.

vue is an open source JavaScript framework for creating user interfaces and a Web application framework for creating single-page applications. The core of Vue is the view layer in the MVC pattern. At the same time, it can also conveniently Obtain data updates and interact with the view and model through specific methods within the component.

Laravel

Laravel is an expressive web application framework with concise syntax. We believe the development process should be an enjoyable and creative experience. Laravel strives to reduce the inconvenience during the development process, so we provide tools or functions that are frequently used in the development process such as authentication, routing, sessions, and caching.

Laravel's goal is to create a pleasant development process for developers without sacrificing application functionality. Happy developers create the best code. For this purpose, we have taken the advantages of various frameworks and concentrated them into Laravel. These frameworks include but are not limited to Ruby on Rails, ASP.NET MVC, and Sinatra.

vue

Vue.js (/vjuː/, or simply Vue) is an open source JavaScript framework for creating user interfaces and a single-page application. Web application framework. A 2016 JavaScript survey showed that Vue had 89% developer satisfaction. On GitHub, the project receives an average of 95 stars per day, making it the third most starred project in Github history.

Vue.js is a popular JavaScript front-end framework designed to better organize and simplify web development. The core focus of Vue is the view layer in the MVC pattern. At the same time, it can also easily obtain data updates and realize the interaction between the view and the model through specific methods within the component.

How to deploy vue in Laravel

Create laravel

First, you need a composer, and then, you With a laravel. Run the command composer create-project --prefer-dist laravel/laravel blog to create a new laravel project (please go to the official website to learn how to create laravel specifically).

Hello world!

Open the command line and enter your project cd blog

Before starting, due to various reasons you know, npm is installed as a foreign node warehouse Various problems such as slow speed may occur during operation of the tool. It is generally recommended to use the taobao source for acceleration. Just add the suffix to the following code. The downloaded project depends on the default dependency. The code is as follows.

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

Download vue routing management, the code is as follows.

npm install vue-router --save-dev

Create a new HelloComponent.vue custom component file in /resources/assets/js/components with the following code.

<template>
    <div>
        <h1 id="Hello-nbsp-World">Hello World!</h1>
    </div>
</template>
<script>
    export default{
        data(){
            return {
            }
        }
    }
</script>

Create a new folder router under /resources/assets/js, and create hello.js in it, and map the hello route to the newly created HelloComponent component through nested routing configuration. The code is as follows.

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))
        },
    ]
})

Create a new hello.vue under /resources/assets/js in the current laravel project as the main interface and nested routing view. The code is as follows.

<template>
    <div>
        <h1 id="Hello">Hello</h1>
        <router-view></router-view>
    </div>
</template>
<script>
    export default{
        data(){
            return {
            }
        }
    }
</script>

Then create hello.js under /resources/assets/js, the code is as follows.

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)
});

Create a new hello.blade.php under /resources/views with the following code.

<!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(&#39;js/manifest.js&#39;) }}"></script>
    <script src="{{ mix(&#39;js/vendor.js&#39;) }}"></script>
    <script src="{{ mix(&#39;js/hello.js&#39;) }}"></script>
</body>
</html>

Add a new route in /resources/routes/web.php, the code is as follows.

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

Modify webpack.mix.js, the code is as follows.

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');

After saving, execute npm run watch in the project directory on the command line to recompile

You can enter php artisan serve in the project directory on the command line and visit http:// You can see the effect by 127.0.0.1:8000/hello

Laravel 5.5 has added Route::view and Route::redirect methods. Routes in 5.4 and below can be written like this Route::get(' /hello', function () {return view('hello');});

[Related recommendations: laravel video tutorial]

The above is the detailed content of Does laravel have vue built-in?. For more information, please follow other related articles on the PHP Chinese website!