Vor Laravel5.3 basierte das Front-End-Engineering auf Gulp. In 5.4 brachte uns Laravel einen neuen Front-End-Tool-Mix. Dieser Abschnitt zeichnet von 0 bis Seeing auf Wenn die Mix-Verpackung abgeschlossen ist, rendert Laravel „Helloworld“Installation1 laravel
Voraussetzungen für das Lesen dieses Abschnitts:Sie müssen Erfahrung mit Laravel und Vue haben oder ein klares Verständnis von Front-End- und Back-End-Engineering haben
composer create-project laravel/laravel learn-mix2. Installieren Sie Front-End-Abhängigkeiten
cd learn-mix ; npm install3. Installieren Sie vue-router
npm install vue-routerKonfiguration
- Erstellen Sie eine neue /resources/assets/js/routes.js und schreiben Sie den folgenden Inhalt
import VueRouter from 'vue-router'; let routes = [ { path: '/', component: require('./components/你的组件名字') } ]; export default new VueRouter({ routes });2. Routing importieren
Ändern Sie /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
});
npm run dev npm run watch # 任选其一
<!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>
rrreeeGreifen Sie auf 127.0.0.1 zu und sehen Sie sich dann die Laravel-Mix-Begrüßungsseite an, ENDE Verwandte Empfehlungen:
Die neuesten fünf Laravel-Video-Tutorials