Detailed explanation of how to deploy vue in Laravel-Laravel-php.cn

Detailed explanation of how to deploy vue in Laravel

藏色散人

Release： 2021-10-28 15:49:27

forward

8023 people have browsed it

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

Copy after login

Download vue routing management, the code is as follows.

npm install vue-router --save-dev

Copy after login

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>

Copy after login

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

Copy after login

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>

Copy after login

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

Copy after login

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>

Copy after login

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

Route::view(&#39;/hello&#39;,&#39;/hello&#39;);

Copy after login

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

Copy after login

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!