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
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
切换到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 命令全局可用
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表示完成
npm install npm audit fix npm audit fix npm audit fix --force npm audit npm audit npm install
Transform the laravel welcome interface view resources/views/welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', 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('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<div>
<!-- 3、使用组件 -->
<example-component></example-component>
</div>
</div>
<!-- 2、引入支持Vue框架和Vue组件的app.js文件 -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>After the installation is completed, the Vue components and JS files are in the resources/js directory ;
Entry file resources/js/app.js file/**
* First we will load all of this project'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('./bootstrap');
window.Vue = require('vue').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('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
//Vue.component('example-component', require('./components/DemoComponent.vue').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: '#app',
});Run
npm run dev
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!
Integrating JavaScript Frameworks (React, Vue, Angular) with a Laravel BackendMay 03, 2025 am 12:20 AMReact,Vue,andAngularcanbeintegratedwithLaravelbyfollowingspecificsetupsteps.1)ForReact:InstallReactusingLaravelUI,setupcomponentsinapp.js.2)ForVue:UseLaravel'sbuilt-inVuesupport,configureinapp.js.3)ForAngular:SetupAngularseparately,servethroughLarave
Task Management Tools: Prioritizing and Tracking Progress in Remote ProjectsMay 02, 2025 am 12:25 AMTaskmanagementtoolsareessentialforeffectiveremoteprojectmanagementbyprioritizingtasksandtrackingprogress.1)UsetoolslikeTrelloandAsanatosetprioritieswithlabelsortags.2)EmploytoolslikeJiraandMonday.comforvisualtrackingwithGanttchartsandprogressbars.3)K
How does the latest Laravel version improve performance?May 02, 2025 am 12:24 AMLaravel10enhancesperformancethroughseveralkeyfeatures.1)Itintroducesquerybuildercachingtoreducedatabaseload.2)ItoptimizesEloquentmodelloadingwithlazyloadingproxies.3)Itimprovesroutingwithanewcachingsystem.4)ItenhancesBladetemplatingwithviewcaching,al
Deployment Strategies for Full-Stack Laravel ApplicationsMay 02, 2025 am 12:22 AMThe best full-stack Laravel application deployment strategies include: 1. Zero downtime deployment, 2. Blue-green deployment, 3. Continuous deployment, and 4. Canary release. 1. Zero downtime deployment uses Envoy or Deployer to automate the deployment process to ensure that applications remain available when updated. 2. Blue and green deployment enables downtime deployment by maintaining two environments and allows for rapid rollback. 3. Continuous deployment Automate the entire deployment process through GitHubActions or GitLabCI/CD. 4. Canary releases through Nginx configuration, gradually promoting the new version to users to ensure performance optimization and rapid rollback.
Scaling a Full-Stack Laravel Application: Best Practices and TechniquesMay 02, 2025 am 12:22 AMToscaleaLaravelapplicationeffectively,focusondatabasesharding,caching,loadbalancing,andmicroservices.1)Implementdatabaseshardingtodistributedataacrossmultipledatabasesforimprovedperformance.2)UseLaravel'scachingsystemwithRedisorMemcachedtoreducedatab
The Silent Struggle: Overcoming Communication Barriers in Distributed TeamsMay 02, 2025 am 12:20 AMToovercomecommunicationbarriersindistributedteams,use:1)videocallsforface-to-faceinteraction,2)setclearresponsetimeexpectations,3)chooseappropriatecommunicationtools,4)createateamcommunicationguide,and5)establishpersonalboundariestopreventburnout.The
Using Laravel Blade for Frontend Templating in Full-Stack ProjectsMay 01, 2025 am 12:24 AMLaravelBladeenhancesfrontendtemplatinginfull-stackprojectsbyofferingcleansyntaxandpowerfulfeatures.1)Itallowsforeasyvariabledisplayandcontrolstructures.2)Bladesupportscreatingandreusingcomponents,aidinginmanagingcomplexUIs.3)Itefficientlyhandleslayou
Building a Full-Stack Application with Laravel: A Practical TutorialMay 01, 2025 am 12:23 AMLaravelisidealforfull-stackapplicationsduetoitselegantsyntax,comprehensiveecosystem,andpowerfulfeatures.1)UseEloquentORMforintuitivebackenddatamanipulation,butavoidN 1queryissues.2)EmployBladetemplatingforcleanfrontendviews,beingcautiousofoverusing@i
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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Zend Studio 13.0.1
Powerful PHP integrated development environment
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
SublimeText3 English version
Recommended: Win version, supports code prompts!
WebStorm Mac version
Useful JavaScript development tools
SublimeText3 Chinese version
Chinese version, very easy to use
