Laravelフロントエンドエンジニアリングミックスの詳しい説明

藏色散人

リリース： 2021-04-14 09:09:59

転載

1989 人が閲覧しました

以下は、Laravel フロントエンドエンジニアリングの組み合わせを紹介する laravel のチュートリアルコラムです。困っている友人の役に立てば幸いです。

laravel5.3 より前のフロントエンドエンジニアリングは gulp に依存していました。 in 5.4 当時、laravelは新しいフロントエンドツールmixをもたらしました
このセクションでは、ゼロからミックスのパッケージ化が完了するまでを記録し、laravelがhelloworldをレンダリングします
このセクションを読むための前提条件: laravelの使用経験が必要ですおよび vue またはフロントエンドとバックエンドのエンジニアリングを明確に理解している

インストール

1. laravel

composer create-project laravel/laravel learn-mix

ログイン後にコピー

2. フロントエンドをインストール-end 依存関係

cd learn-mix ; npm install

ログイン後にコピー

3. vue-routerのインストール

npm install vue-router

ログイン後にコピー

設定

ルーティングファイルの作成

New/resources/assets /js/routes.js、次の内容を記述します

import VueRouter from 'vue-router';

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

export default new VueRouter({
    routes
});

ログイン後にコピー

2. ルーティングをインポートします

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

ログイン後にコピー

3. コンパイルします

back ルートディレクトリに移動します

npm run dev 
npm run watch 
# 任选其一

ログイン後にコピー

4. 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>

ログイン後にコピー