laravel5.3 이전에는 프론트 엔드 엔지니어링이 gulp에 의존했습니다. 5.4에서는 laravel이 새로운 프론트 엔드 도구 믹스를 가져왔습니다.
이 섹션은 0부터 Seeing까지 기록합니다. 믹스 패키징이 완료되면 laravel은 helloworld를 렌더링합니다이 섹션을 읽기 위한 전제 조건: laravel 및 vue 사용 경험이 있거나 프런트엔드 및 백엔드 엔지니어링에 대한 명확한 이해가 필요합니다
설치
1. laravel
composer create-project laravel/laravel learn-mix
2 . 프론트엔드 종속성 설치
cd learn-mix ; npm install
3. vue-router
npm install vue-router
Configuration
- 라우팅 파일 생성
새 /resources/assets/js/routes.js를 생성하고 다음 내용을 작성하세요.
import VueRouter from 'vue-router';
let routes = [
{
path: '/',
component: require('./components/你的组件名字')
}
];
export default new VueRouter({
routes
});
2. 경로 가져오기
/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. 컴파일
루트 디렉터리로 돌아갑니다
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>가 가리키는 환영 템플릿을 수정합니다.