Detailed explanation of Laravel front-end engineering mix

藏色散人

Release： 2021-04-14 09:09:59

forward

1988 people have browsed it

The following is the tutorial column of laravel to introduce you to the mix of Laravel front-end engineering. I hope it will be helpful to friends in need!

Before laravel5.3, front-end engineering relied on gulp, and in 5.4 At that time, laravel brought us a new front-end tool mix
This section records from 0 to seeing mix packaging completed, laravel renders helloworld
Prerequisites for reading this section: Requires experience in using laravel and vue Or have a clear understanding of front-end and back-end engineering

Install

1. Install laravel

composer create-project laravel/laravel learn-mix

Copy after login

2. Install front-end dependencies

cd learn-mix ; npm install

Copy after login

3. Install vue-router

npm install vue-router

Copy after login

Configuration

Create routing file

New/resources/assets/js/routes.js, And write the following content

import VueRouter from 'vue-router';

let routes = [
    {
        path: '/',
        component: require('./components/你的组件名字')
    }
];

export default new VueRouter({
    routes
});

Copy after login

2. Import routing

Modify/resources/assets/js/app.js

// 导入路由包
import VueRouter from 'vue-router';

// use
Vue.use(VueRouter);

// 导入路由文件
import routes from './routes.js';

const app = new Vue({
    el: '#app',
    // 使用路由
    router: routes
});

Copy after login

3. Compile

back Go to the root directory

npm run dev 
npm run watch 
# 任选其一

Copy after login

4. Modify the welcome template pointed by laravel's default / route

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <!--导入编译好的CSS-->
    <link rel="stylesheet" href="/css/app.css">
    <!--导入CSRF_TOKEN-->
    <meta name="csrf-token" content="{{ csrf_token() }}"/>
</head>
<body>
<p id="app">
    <router-view></router-view>
</p>
<!--导入编译好的JS-->
<script src="/js/app.js"></script>
</body>
</html>

Copy after login

Visit 127.0.0.1 and you will see the laravel-mix welcome page, END

The above is the detailed content of Detailed explanation of Laravel front-end engineering mix. For more information, please follow other related articles on the PHP Chinese website!