Table of Contents
After the installation is completed, the Vue components and JS files are in the resources/js directory ;" >After the installation is completed, the Vue components and JS files are in the resources/js directory ;
The current situation is that every time the Vue component is changed It is necessary to re-execute
Home PHP Framework Laravel Detailed explanation of laravel8.0 + vue installation method

Detailed explanation of laravel8.0 + vue installation method

Apr 21, 2021 am 09:14 AM
laravel

The following tutorial column will introduce you to laravel8.0 vue installation. I hope it will be helpful to friends in need!                                                                                                                

composer create-project --prefer-dist laravel/laravel fl_app

composer install

php artisan key:generate
Copy after login

Install node

yum install wget
wget https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz#得到 一个包 node-v12.18.3-linux-x64.tar
 xz -d node-v12.18.3-linux-x64.tar.xz#得到一个目录 node-v12.18.3-linux-x64
 tar -xvf node-v12.18.3-linux-x64.tar
Copy after login
切换到node bin目录 一共有三个文件 node npm  npx 
src]# cd node-v12.18.3-linux-x64/bin/[root@VM-0-4-centos bin]# ll
total 47508-rwxr-xr-x 1 work work 48646656 Jul 22 23:00 node
lrwxrwxrwx 1 work work       38 Jul 22 23:00 npm -> ../lib/node_modules/npm/bin/npm-cli.js
lrwxrwxrwx 1 work work       38 Jul 22 23:00 npx -> ../lib/node_modules/npm/bin/npx-cli.js[root@VM-0-4-centos bin]# 
执行命令查看 node 版本
# ./node -v
v12.18.3[root@VM-0-4-centos bin]# 
截止目前为止表示node 已经可用了, 下一步是要让 node 命令全局可用
Copy after login

Soft connection

我的node 放在 /usr/local/src 目录下 
ln -s /usr/local/src/node-v12.18.3-linux-x64/bin/node /usr/bin/node
ln -s /usr/local/src/node-v12.18.3-linux-x64/bin/npm /usr/bin/npm
ln -s /usr/local/src/node-v12.18.3-linux-x64/bin/npx /usr/bin/npx

任意目录 任意用户 执行:[root@VM-0-4-centos ~]# node -v
v12.18.3[huipeng@VM-0-4-centos ~]$ node -v
v12.18.3表示完成
Copy after login
npm install
npm audit fix
npm audit fix npm audit fix --force npm audit
npm audit
npm install
Copy after login

Transform the laravel welcome interface view resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace(&#39;_&#39;, &#39;-&#39;, app()->getLocale()) }}">
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">

       <title>Laravel</title>

       <!--1、 引入支持 Bootstrap 的 CSS 样式文件 -->
       <link href="{{ asset(&#39;css/app.css&#39;) }}" rel="stylesheet">

   </head>
   <body>
     <div id="app">
         <div>
      <!-- 3、使用组件 -->
           <example-component></example-component>
         </div>
     </div>  

    <!-- 2、引入支持Vue框架和Vue组件的app.js文件 -->
     <script src="{{ asset(&#39;js/app.js&#39;) }}"></script>
   </body>
</html>
Copy after login

Entry file resources/js/app.js file
/**
 * First we will load all of this project&#39;s JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */
require(&#39;./bootstrap&#39;);

window.Vue = require(&#39;vue&#39;).default;

/**
 * The following block of code may be used to automatically register your * Vue components. It will recursively scan this directory for the Vue * components and automatically register them with their "basename". * * Eg. ./components/ExampleComponent.vue -> <example-component></example-component> */
// const files = require.context(&#39;./&#39;, true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split(&#39;/&#39;).pop().split(&#39;.&#39;)[0], files(key).default))

Vue.component(&#39;example-component&#39;, require(&#39;./components/ExampleComponent.vue&#39;).default);
//Vue.component(&#39;example-component&#39;, require(&#39;./components/DemoComponent.vue&#39;).default);

/**
 * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */
const app = new Vue({
    el: &#39;#app&#39;,
});
Copy after login
Run

npm run dev
Copy after login

Real-time compilation

The current situation is that every time the Vue component is changed It is necessary to re-execute

npm run dev

, which is very troublesome;

You can use the npm run watch command to compile the front-end resources, and it will be automatically recompiled every time there is a change

Related recommendations: The latest five Laravel video tutorials

The above is the detailed content of Detailed explanation of laravel8.0 + vue installation method. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Laravel Eloquent ORM in Bangla partial model search) Laravel Eloquent ORM in Bangla partial model search) Apr 08, 2025 pm 02:06 PM

LaravelEloquent Model Retrieval: Easily obtaining database data EloquentORM provides a concise and easy-to-understand way to operate the database. This article will introduce various Eloquent model search techniques in detail to help you obtain data from the database efficiently. 1. Get all records. Use the all() method to get all records in the database table: useApp\Models\Post;$posts=Post::all(); This will return a collection. You can access data using foreach loop or other collection methods: foreach($postsas$post){echo$post->

Laravel Introduction Example Laravel Introduction Example Apr 18, 2025 pm 12:45 PM

Laravel is a PHP framework for easy building of web applications. It provides a range of powerful features including: Installation: Install the Laravel CLI globally with Composer and create applications in the project directory. Routing: Define the relationship between the URL and the handler in routes/web.php. View: Create a view in resources/views to render the application's interface. Database Integration: Provides out-of-the-box integration with databases such as MySQL and uses migration to create and modify tables. Model and Controller: The model represents the database entity and the controller processes HTTP requests.

Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in Solve caching issues in Craft CMS: Using wiejeben/craft-laravel-mix plug-in Apr 18, 2025 am 09:24 AM

When developing websites using CraftCMS, you often encounter resource file caching problems, especially when you frequently update CSS and JavaScript files, old versions of files may still be cached by the browser, causing users to not see the latest changes in time. This problem not only affects the user experience, but also increases the difficulty of development and debugging. Recently, I encountered similar troubles in my project, and after some exploration, I found the plugin wiejeben/craft-laravel-mix, which perfectly solved my caching problem.

Laravel's geospatial: Optimization of interactive maps and large amounts of data Laravel's geospatial: Optimization of interactive maps and large amounts of data Apr 08, 2025 pm 12:24 PM

Efficiently process 7 million records and create interactive maps with geospatial technology. This article explores how to efficiently process over 7 million records using Laravel and MySQL and convert them into interactive map visualizations. Initial challenge project requirements: Extract valuable insights using 7 million records in MySQL database. Many people first consider programming languages, but ignore the database itself: Can it meet the needs? Is data migration or structural adjustment required? Can MySQL withstand such a large data load? Preliminary analysis: Key filters and properties need to be identified. After analysis, it was found that only a few attributes were related to the solution. We verified the feasibility of the filter and set some restrictions to optimize the search. Map search based on city

Laravel user login function Laravel user login function Apr 18, 2025 pm 12:48 PM

Laravel provides a comprehensive Auth framework for implementing user login functions, including: Defining user models (Eloquent model), creating login forms (Blade template engine), writing login controllers (inheriting Auth\LoginController), verifying login requests (Auth::attempt) Redirecting after login is successful (redirect) considering security factors: hash passwords, anti-CSRF protection, rate limiting and security headers. In addition, the Auth framework also provides functions such as resetting passwords, registering and verifying emails. For details, please refer to the Laravel documentation: https://laravel.com/doc

Laravel and the Backend: Powering Web Application Logic Laravel and the Backend: Powering Web Application Logic Apr 11, 2025 am 11:29 AM

How does Laravel play a role in backend logic? It simplifies and enhances backend development through routing systems, EloquentORM, authentication and authorization, event and listeners, and performance optimization. 1. The routing system allows the definition of URL structure and request processing logic. 2.EloquentORM simplifies database interaction. 3. The authentication and authorization system is convenient for user management. 4. The event and listener implement loosely coupled code structure. 5. Performance optimization improves application efficiency through caching and queueing.

Laravel framework installation method Laravel framework installation method Apr 18, 2025 pm 12:54 PM

Article summary: This article provides detailed step-by-step instructions to guide readers on how to easily install the Laravel framework. Laravel is a powerful PHP framework that speeds up the development process of web applications. This tutorial covers the installation process from system requirements to configuring databases and setting up routing. By following these steps, readers can quickly and efficiently lay a solid foundation for their Laravel project.

How to view the version number of laravel? How to view the version number of laravel How to view the version number of laravel? How to view the version number of laravel Apr 18, 2025 pm 01:00 PM

The Laravel framework has built-in methods to easily view its version number to meet the different needs of developers. This article will explore these methods, including using the Composer command line tool, accessing .env files, or obtaining version information through PHP code. These methods are essential for maintaining and managing versioning of Laravel applications.

See all articles