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

Home

PHP Framework

Laravel

Detailed explanation of how to deploy vue in Laravel

藏色散人

Oct 28, 2021 pm 03:48 PM

laravelvue

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 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 &#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 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(&#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!

Statement

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

laravel单点登录方法详解Jun 15, 2022 am 11:45 AM

本篇文章给大家带来了关于laravel的相关知识，其中主要介绍了关于单点登录的相关问题，单点登录是指在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统，下面一起来看一下，希望对大家有帮助。

一起来聊聊Laravel的生命周期Apr 25, 2022 pm 12:04 PM

本篇文章给大家带来了关于laravel的相关知识，其中主要介绍了关于Laravel的生命周期相关问题，Laravel 的生命周期从public\index.php开始，从public\index.php结束，希望对大家有帮助。

laravel中guard是什么Jun 02, 2022 pm 05:54 PM

在laravel中，guard是一个用于用户认证的插件；guard的作用就是处理认证判断每一个请求，从数据库中读取数据和用户输入的对比，调用是否登录过或者允许通过的，并且Guard能非常灵活的构建一套自己的认证体系。

laravel中asset()方法怎么用Jun 02, 2022 pm 04:55 PM

laravel中asset()方法的用法：1、用于引入静态文件，语法为“src="{{asset(‘需要引入的文件路径’)}}"”；2、用于给当前请求的scheme前端资源生成一个url，语法为“$url = asset('前端资源')”。

实例详解laravel使用中间件记录用户请求日志Apr 26, 2022 am 11:53 AM

本篇文章给大家带来了关于laravel的相关知识，其中主要介绍了关于使用中间件记录用户请求日志的相关问题，包括了创建中间件、注册中间件、记录用户访问等等内容，下面一起来看一下，希望对大家有帮助。

laravel中间件基础详解May 18, 2022 am 11:46 AM

本篇文章给大家带来了关于laravel的相关知识，其中主要介绍了关于中间件的相关问题，包括了什么是中间件、自定义中间件等等，中间件为过滤进入应用的 HTTP 请求提供了一套便利的机制，下面一起来看一下，希望对大家有帮助。

laravel的fill方法怎么用Jun 06, 2022 pm 03:33 PM

在laravel中，fill方法是一个给Eloquent实例赋值属性的方法，该方法可以理解为用于过滤前端传输过来的与模型中对应的多余字段；当调用该方法时，会先去检测当前Model的状态，根据fillable数组的设置，Model会处于不同的状态。

laravel路由文件在哪个目录里Apr 28, 2022 pm 01:07 PM

laravel路由文件在“routes”目录里。Laravel中所有的路由文件定义在routes目录下，它里面的内容会自动被框架加载；该目录下默认有四个路由文件用于给不同的入口使用：web.php、api.php、console.php等。

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Repo: How To Revive Teammates

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

3 weeks agoByDDD

Hot Tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

SublimeText3 Linux new version

SublimeText3 Linux latest version

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.