Home > Article > PHP Framework > Detailed explanation of how to deploy vue in Laravel

Detailed explanation of how to deploy vue in Laravel

藏色散人forward: 2021-10-28 15:48:448038browse

Laravel vue environment deployment

This tutorial introduces the deployment of vue in Laravel. Laravel includes some basic scaffolding to make it easier to start writing modern JavaScript using the Vue library. Vue provides an expressive API for building powerful JavaScript applications using components. We can use Laravel Mix to easily compile JavaScript components into a browser-ready JavaScript file.

Related recommendations: The latest five Laravel video tutorials, The latest five vue.js video tutorial selections

Create laravel

First, you need a composer, and then you have 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 you start, because of various things you know The reason is that npm, as a foreign node warehouse installation tool, may encounter various problems such as slow speed during operation. It is generally recommended to use the taobao source for acceleration. The following code can also be added with a suffix. The downloaded project depends on the default, and 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>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 &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
Vue.use(VueRouter)
export default new VueRouter({
    saveScrollPosition: true,
    routes: [
        {
            name: "hello",
            path: &#39;/&#39;,
            component: resolve =>void(require([&#39;../components/HelloComponent.vue&#39;], 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>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(&#39;./bootstrap&#39;);
window.Vue = require(&#39;vue&#39;);
import Vue from &#39;vue&#39;
import App from &#39;./hello.vue&#39;
import router from &#39;./router/hello.js&#39;
const app = new Vue({
    el: &#39;#app&#39;,
    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(&#39;/hello&#39;,&#39;/hello&#39;);

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

mix.js(&#39;resources/assets/js/app.js&#39;, &#39;public/js&#39;)
   .js(&#39;resources/assets/js/hello.js&#39;, &#39;public/js&#39;)
   .extract([&#39;vue&#39;, "vue-router", "axios"])
   .sass(&#39;resources/assets/sass/app.scss&#39;, &#39;public/css&#39;);

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

Finally

Sometimes when running npm, a Write EIO error will be prompted, maybe It is caused by coding problems. At this time, you can run the command line file as an administrator, or run chcp 850 to set the active code page number. The tutorial on deploying Vue in laravel is basically over. If you are interested in learning more about writing Vue For component information, you can read the Vue documentation.

The above is the detailed content of Detailed explanation of how to deploy vue in Laravel. For more information, please follow other related articles on the PHP Chinese website!

php JavaScript laravel composer vue.js npm webpack JS function http

Statement：

This article is reproduced at:juejin.im. If there is any infringement, please contact admin@php.cn delete

Previous article：Analyze the use of Laravel event systemNext article：Analyze the use of Laravel event system

See more

Detailed explanation of how to deploy vue in Laravel

Related articles