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 helloworldPré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
2. . Installer les dépendances frontales
cd learn-mix ; npm install
3. Installer vue-router
npm install vue-router
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
});
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
});3. Compilezretour Allez dans le répertoire racine 4 Modifiez le modèle de bienvenue pointé par la route par défaut de laravelnpm 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> et vous le ferez. voir la page d'accueil de laravel-mix, FIN