Detailed explanation of how to deploy vue in Laravel
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 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
saveScrollPosition: true,
routes: [
{
name: "hello",
path: '/',
component: resolve =>void(require(['../components/HelloComponent.vue'], 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('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import App from './hello.vue'
import router from './router/hello.js'
const app = new Vue({
el: '#app',
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('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/hello.js') }}"></script>
</body>
</html>Add a new route in /resources/routes/web.php, the code is as follows.
Route::view('/hello','/hello');
Modify webpack.mix.js, the code is as follows.
mix.js('resources/assets/js/app.js', 'public/js') .js('resources/assets/js/hello.js', 'public/js') .extract(['vue', "vue-router", "axios"]) .sass('resources/assets/sass/app.scss', 'public/css');
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!
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
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
How to add functions to buttons for vue
Apr 08, 2025 am 08:51 AM
You can add a function to the Vue button by binding the button in the HTML template to a method. Define the method and write function logic in the Vue instance.
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'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
How to jump to the div of vue
Apr 08, 2025 am 09:18 AM
There are two ways to jump div elements in Vue: use Vue Router and add router-link component. Add the @click event listener and call this.$router.push() method to jump.
How to jump a tag to vue
Apr 08, 2025 am 09:24 AM
The methods to implement the jump of a tag in Vue include: using the a tag in the HTML template to specify the href attribute. Use the router-link component of Vue routing. Use this.$router.push() method in JavaScript. Parameters can be passed through the query parameter and routes are configured in the router options for dynamic jumps.
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.
React, Vue, and the Future of Netflix's Frontend
Apr 12, 2025 am 12:12 AM
Netflix mainly uses React as the front-end framework, supplemented by Vue for specific functions. 1) React's componentization and virtual DOM improve the performance and development efficiency of Netflix applications. 2) Vue is used in Netflix's internal tools and small projects, and its flexibility and ease of use are key.
How to set up a jump page for vue
Apr 08, 2025 am 09:09 AM
There are several ways to set up page redirects in Vue, including creating clickable links using the router-link component. Use the router.push() method to manually add new routes to the history stack. Use the router.replace() method to replace the current route. Redirect to a new page directly using location.href.
