Before laravel5.3, front-end engineering relied on gulp, and in 5.4 At that time, laravel brought us a new front-end tool mix
This section records from 0 to seeing mix packaging completed, laravel renders helloworldPrerequisites for reading this section: Requires experience in using laravel and vue Or have a clear understanding of front-end and back-end engineering
Install
1. Install laravel
composer create-project laravel/laravel learn-mix
2. Install front-end dependencies
cd learn-mix ; npm install
3. Install vue-router
npm install vue-router
Configuration
- Create routing file
New/resources/assets/js/routes.js, And write the following content
import VueRouter from 'vue-router';
let routes = [
{
path: '/',
component: require('./components/你的组件名字')
}
];
export default new VueRouter({
routes
});
2. Import routing
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. Compile
back Go to the root directory
npm run dev npm run watch # 任选其一
4. Modify the welcome template pointed by laravel's default / route
<!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>