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>