Tích hợp Vue.js đa điểm nhập vào Laravel

Việc tích hợp Vue.js vào Laravel khá đơn giản vì Laravel đã chuẩn bị sẵn các công cụ cần thiết.

Laravel phiên bản 5.6, lưu ý rằng PHP CLI khác với PHP web và cần thiết lập biến môi trường. Phiên bản PHP yêu cầu từ 7.1 trở lên.

Tạo dự án mới:

composer create-project --prefer-dist laravel/laravel website 5.6.*

Trong tệp package.json tại thư mục gốc, thêm các thư viện cần thiết:

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.18",
    "bootstrap": "^4.0.0",
    "popper.js": "^1.12",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^2.0",
    "lodash": "^4.17.4",
    "vue": "^2.5.17",
    "element-ui": "^2.4.6",
    "vue-loader": "^13.7.1",
    "vue-router": "^3.0.1",
    "vux": "^2.9.2",
    "vux-loader": "^1.2.9"
  },
  "dependencies": {
    "axios": "^0.18",
    "bootstrap": "^4.0.0",
    "popper.js": "^1.12",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^2.0",
    "lodash": "^4.17.4",
    "vue": "^2.5.17",
    "element-ui": "^2.4.6",
    "vue-loader": "^13.7.1",
    "vue-router": "^3.0.1",
    "vux": "^2.9.2",
    "vux-loader": "^1.2.9"
  }
}

Kiểm tra phiên bản mới nhất của các thành phần:

npm view element-ui version
npm view vue-loader version
npm view vue-router version
npm view vuex version
npm view vux-loader version

Cài đặt các thư viện:

cnpm install

Lưu ý: Các thành phần trong laravel-mix nên có phiên bản khớp với package.json để tránh các vấn đề không mong muốn.

Đây là giải pháp cho vấn đề đa điểm nhập, vì nhiều ứng nghiệp vụ cần Vue.js như giao diện người dùng, quản trị, phiên bản di động, diễn đàn,...

Thêm các tuyến đường (routes) trong tệp routes/web.php:

Route::get('/', function () {
    return view('index');
});

Route::get('/admin', function () {
    return view('admin/index');
});

Tạo hai tệp view cho các điểm nhập khác nhau:

Tệp resources/views/index.blade.php:


<html lang="{{ config('app.locale') }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="X-CSRF-TOKEN" content="{{csrf_token()}}">
    <title>Trang chủ</title>
</head>

<body>
    <div id="app">
        
    </div>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

Tệp resources/views/admin/index.blade.php:


<html lang="{{ config('app.locale') }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="X-CSRF-TOKEN" content="{{csrf_token()}}">
    <title>Bảng điều khiển</title>
</head>

<body>
    <div id="app">
        
    </div>

    <script src="{{ mix('js/admin.js') }}"></script>
</body>
</html>

Cấu hình webpack.mix.js để xử lý nhiều điểm nhập:

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');
mix.js('resources/assets/js/admin.js', 'public/js')
    .sass('resources/assets/sass/admin.scss', 'public/css');

Tạo tệp resources/assets/js/admin.js:


/**
 * Đầu tiên, chúng ta sẽ tải tất cả các phụ thuộc JavaScript của dự án này,
 * bao gồm Vue và các thư viện khác. Đây là điểm khởi đầu tuyệt vời khi
 * xây dựng các ứng dụng web mạnh mẽ, mạnh mẽ sử dụng Vue và Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
/**
 * Tiếp theo, chúng ta sẽ tạo một ứng dụng Vue mới và đính kèm nó vào
 * trang. Sau đó, bạn có thể bắt đầu thêm các thành phần vào ứng dụng này
 * hoặc tùy chỉnh JavaScript scaffolding để phù hợp với nhu cầu riêng của bạn.
 */

Vue.component('admin', require('./components/Admin.vue'));

const app = new Vue({
    el: '#app'
});

Thêm Element UI (lưu ý đường dẫn CSS có thể khác nhau tùy phiên bản):

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);

Tạo tệp resources/assets/sass/admin.scss:

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

// Bootstrap
@import '~bootstrap/scss/bootstrap';

.navbar-laravel {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

Có thể sẽ gặp một số vấn đề nhỏ cần tự mình giải quyết trong quá trình triển khai.

Thẻ: laravel Vue.js Webpack Element UI npm

Đăng vào ngày 21 tháng 7 lúc 13:39

Thành phố Cuồng loạn

Tích hợp Vue.js đa điểm nhập vào Laravel

Thẻ Phổ Biến