Explication détaillée du mix d'ingénierie front-end de Laravel

藏色散人

Libérer： 2021-04-14 09:09:59

avant

1989 Les gens l'ont consulté

Ce qui suit est une introduction au mix d'ingénierie frontale Laravel de la colonne tutoriel laravel J'espère que cela sera utile aux amis qui en ont besoin !

Avant laravel5.3, l'ingénierie frontale reposait sur gulp, et en 5.4 À cette époque, laravel nous apportait un nouveau mix d'outils front-end
Cette section enregistre de 0 à lorsque le packaging du mix est terminé, laravel rend helloworld
Prérequis pour lire cette section : Vous devez avoir expérience en laravel et vue Ou avoir une compréhension claire de l'ingénierie front-end et back-end

Installation

1 Installer laravel

composer create-project laravel/laravel learn-mix

Copier après la connexion

2. . Installer les dépendances frontales

cd learn-mix ; npm install

Copier après la connexion

3. Installer vue-router

npm install vue-router

Copier après la connexion

Configurer

Créer un fichier de routage

Créer un nouveau /resources/assets/js/routes.js, Et écrivez le contenu suivant

import VueRouter from 'vue-router';

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

export default new VueRouter({
    routes
});

Copier après la connexion

2 Importer le routage

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
});

Copier après la connexion

3. Compilez

retour Allez dans le répertoire racine

npm run dev 
npm run watch 
# 任选其一
Copier après la connexion

4 Modifiez le modèle de bienvenue pointé par la route par défaut de laravel

<!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>

Copier après la connexion

et vous le ferez. voir la page d'accueil de laravel-mix, FIN

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!