Thủ Thuật Tạo Trang Web Đa Ngôn Ngữ Với Laravel Và Vue.js, Cách Tích Hợp Vue
1. Mở đầu
Mặc định Laravel đã cung ứng ta viết áp dụng đa ngôn ngữ hết sức dễ ợt và dễ dàng dàng. Tuy nhiên, Laravel chỉ cung cấp đa ngôn từ với file .blade.php. Khi ta tạo ra front end bằng vuejs thì các component của nó sẽ không thể phát âm được cú pháp của Laravel.Hôm nay bản thân sẽ reviews một cách chi tiết các bạn có thể dùng để phối kết hợp đa ngữ điệu trong vuejs với laravel.
Bạn đang xem: Thủ thuật tạo trang web đa ngôn ngữ với Laravel và Vue.js
2. Thiết lập đặt
2.1 Về phần Laravel
Chúng ta đã sữ dụng package martinlindhe/laravel-vue-i18n-generator để tạo ra file js của ngôn ngữ.Chạy lệnh sau trong folder project của bạn
composer require martinlindhe/laravel-vue-i18n-generator
trong file config/app.php ta thêm chiếc sau vào phần providers
Martin
LindheVue
Internationalization
GeneratorGenerator
Provider::class,
php artisan vendor:publish --provider="Martin
LindheVue
Internationalization
GeneratorGenerator
Provider"Sẽ có 1 file vue-i18n-generator.php được tạo thành trong thư mục config. Trong file này, ta hoàn toàn có thể config 1 số trường như đường truyền file ngôn ngữ, tệp tin js.
return < /* |-------------------------------------------------------------------------- | Laravel translations path |-------------------------------------------------------------------------- | | The default path where the translations are stored by Laravel. | Note: the path will be prepended to lớn point khổng lồ the app directory. | */ "lang
Path" => "/resources/lang", /* |-------------------------------------------------------------------------- | Laravel translation files |-------------------------------------------------------------------------- | | You can choose which translation files to lớn be generated. | Note: leave this empty for all the translation files to lớn be generated. | */ "lang
Files" => < /* "pagination", "passwords" */ >, /* |-------------------------------------------------------------------------- | output file |-------------------------------------------------------------------------- | | The javascript path where I will place the generated file. | Note: the path will be prepended lớn point to the app directory. | */ "js
Path" => "/resources/lang/", "js
File" => "/resources/js/vue-i18n-locales.generated.js", /* |-------------------------------------------------------------------------- | i18n library |-------------------------------------------------------------------------- | | Specify the library you use for localization. | Options are vue-i18n or vuex-i18n. | */ "i18n
Lib" => "vue-i18n", /* |-------------------------------------------------------------------------- | đầu ra messages |-------------------------------------------------------------------------- | | Specify if the library should show "written to" messages | after generating json files. | */ "show
Output
Messages" => false,>;để biến đổi các file ngôn ngữ trong Laravel sang file js ta chạy lệnh sau: php artisan vue-i18n:generatemột tệp tin vue-i18n-locales.generated.js được tạo nên theo băng thông mà chúng ta đã config. Sau này khi ý muốn định nghĩa 1 key mới, bạn có thể thêm trực tiếp vào file này, hoặc viết vào những file ngôn từ trong Laravel rồi chạy lại lệnh vừa rồi.
2.2 Về phần Vuejs
chúng ta sẽ áp dụng package vue-i18n Chạy lệnh sau:
npm i --save vue-i18n
Hoặc
yarn showroom vue-i18n
Thêm vào đoạn code sau trong tệp tin app.js
import Vue from "vue";import Vue
Internationalization from "vue-i18n";import Locale from "./vue-i18n-locales.generated.js";Vue.use(Vue
Internationalization);const i18n = new Vue
Internationalization( locale: document.head.query
Selector("meta
meta name="locale" content=" App::get
Locale() "/>
3. Sử dụng
Cách sử dụng tựa như như cách chúng ta làm cùng với fileblade Đối với block template $t("message.go_to_home") // hoặc $t("messages.hello", name: "name") // name là biến đổi động, giống như như laravel
Đối cùng với code vào thẻ scriptthis.$t("message.hello");
4. Cố gắng Đổi Ngôn Ngữ
4.1 Về phần Laravel
Ta sẽ tạo nên 1 api biến hóa ngôn ngữ.php artisan make:controller Lang
Controllertrong Lang
Controler ta thêm đoạn code sau
public function set
Language($language) Session::put("language", $language); return $language;Tiếp theo ta sẽ tạo nên 1 middleware
php artisan make:middleware Lang
Middlewareta chèn đoạn code sau:
public function handle($request, Closure $next) if (Session::has("language")) App::set
Locale(Session::get("language")); else App::set
Locale("en"); return $next($request); định nghĩa route vào route/api.php
Route::get("/language/language", "Lang
Controller
set
Language");
4.2 Về phần Vuejs
Ta tạo nên 1 component với câu chữ như sautemplate> div class="lang"> select name="language" class="form-select"
change="change
Language" v-model="language"> option value="en">Englishoption> option value="vi">Tiếng Việtoption> select> div>template>script>export default data() return language: this.$i18n.locale ; , methods: change
Language() local
Storage.set
Item("language", this.language); this.$i18n.locale = this.language; fetch(`api/language/$this.language`); ;script>
5. Tham Khảo
Mặc dù Java
Script là 1 trong ngôn ngữ lập trình khá trả chỉnh, nhưng lại hệ sinh thái xung xung quanh nó vẫn còn đó nhiều tiềm năng không được khai thác. Các công cố kỉnh như khung (framework) giúp dễ dàng và đơn giản hóa cuộc sống của các nhà cải cách và phát triển phần mềm bằng phương pháp cung cấp gốc rễ cho việc phát triển ứng dụng mượt mà. Một trong những các khung (framework) nổi bật của Java
Script là Vue
JS. Vậy Vue.Js Là Gì? Hãy cùng công ty Dịch vụ SEO – kiến thiết Website tuyensinhyduocchinhquy.edu.vn khám phá các vận dụng và tính năng quan trọng của form (framework) này!
1. Vue
JS là gì?
Trước tiên, Vue.Js Là Gì? Vue
JS là một trong những khung (framework) mã mối cung cấp mở của Java
Script được áp dụng để cách tân và phát triển giao diện web tương tác. Đây là một trong những khung (framework) danh tiếng được vận dụng để đơn giản dễ dàng hóa thừa trình trở nên tân tiến web. Vue
JS tập trung chủ yếu vào phần giao diện. Nó hoàn toàn có thể dễ dàng tích hòa hợp vào các dự án lớn để cách tân và phát triển phần front-end mà không chạm mặt vấn đề gì đáng kể.
Việc thiết lập Vue
JS rất đối kháng giản. Ngẫu nhiên nhà trở nên tân tiến nào cũng hoàn toàn có thể nhanh chóng làm cho quen với xây dựng đồ họa web tương tác. Vue
JS được tạo nên bởi Evan You, một cựu nhân viên cấp dưới và lập trình viên tại Google. Phiên bản ban sơ của Vue
JS được ra mắt vào tháng hai năm 2014. Sát đây, nó đã dành đến con số 64.828 sao bên trên Git
Hub, cho biết sự thông dụng của nó.
2. Những ưu nhược điểm của Vue
JS
Tương tự như các công nghệ khác, Vue.js gây tranh cãi xung đột trong cộng đồng. Vậy ưu thế và điểm yếu kém của Vue.Js Là Gì? Trước tiên, hãy tìm hiểu những ích lợi của framework này.
2.1. Ưu điểm
Kích thước nhỏ: Tập tin nén của Vue Framework chỉ có form size 18 KB. Điều này giúp việc setup nhanh chóng và có ảnh hưởng tích cực đến sự việc tối ưu hóa SEO cùng trải nghiệm người dùng (UX).Virtual DOM cùng hiệu năng: DOM (Document Object Model) là mô hình mà bạn gặp mặt phải khi xây dừng trang web. DOM thay mặt cho một trang HTML với cấu trúc cây của các đối tượng (nút), bộc lộ kiểu, thành phần với nội dung. Khi người tiêu dùng tương tác với trang, DOM nên được update và hiển thị lại trên màn hình. Tuy nhiên, việc cập nhật toàn cỗ DOM là một quá trình phức tạp. Để tăng tốc độ tải trang, VueJS thực hiện Virtual DOM. Đây là một bản sao của DOM gốc, giúp xác minh các phần tử cần update mà không buộc phải render lại toàn cục cây nút. Cách thức này góp hiển thị trang mau lẹ và nâng cao hiệu suất ứng dụng.Reactive system cùng two-way data binding: tài liệu binding là quá trình liên kết giữa quy mô dữ liệu (data source) và mẫu DOM hoặc HTML của view. One-way data binding có thể chấp nhận được thông tin chỉ truyền một chiều, từ mô hình sang view hoặc ngược lại. Trong trường đúng theo này, các biến hóa trong nguồn sẽ tự động hóa cập nhật DOM, nhưng không trái lại vì DOM chỉ bao gồm quyền truy vấn cập dự phòng vào mô hình.
Two-way data binding có thể chấp nhận được trao đổi tài liệu giữa mô hình và view cả hai chiều. Nghĩa là, mô hình lắng nghe những sự khiếu nại trên DOM và ngẫu nhiên cập nhật nào xuất phát điểm từ 1 phía vẫn phản ánh ngay mau lẹ ở phía còn lại. Phương thức này vứt bỏ việc viết mã mẫu mã và đơn giản và dễ dàng hóa quá trình cải cách và phát triển ứng dụng. Tuy nhiên, bài toán gỡ lỗi khó khăn và tài năng xảy ra lỗi khiến cho việc áp dụng two-way data binding không
2.2. Nhược điểm
Dù có rất nhiều ưu điểm, nhưng Vue
JS cũng có nhược điểm riêng. Nhìn nhận và đánh giá một bí quyết khách quan, hãy cùng tìm hiểu những nhược điểm của Vue.js.
JS biến đổi một lựa chọn tương xứng hơn.Khi kiếm tìm kiếm tin tức về Vue
JS, người tiêu dùng sẽ phải đối mặt với cuộc bàn thảo trên các diễn đàn, plugin được diễn tả và các hướng dẫn bởi tiếng Trung. Điều này có thể gây khó khăn nếu người tiêu dùng không biết ngôn ngữ này.Hỗ trợ hạn chế cho các dự án bài bản lớn: form size của xã hội và nhóm trở nên tân tiến của Vue
JS vẫn không thể đối chiếu với Angular hay React. Framework này cũng không sở hữu và nhận được cung cấp tài chủ yếu từ các công ty lớn. Để sử dụng trong số dự án đồ sộ lớn, technology phải định hình và được hỗ trợ mạnh mẽ để có thể giải quyết những vấn đề một cách nhanh chóng. Mặc dù Vue
JS không gặp gỡ nhiều vụ việc và trong cả có sự niềm nở từ những công ty như IBM cùng Adobe, tuy thế nó đa phần được sử dụng trong số dự án kha khá nhỏ.Tiềm ẩn của sự việc linh hoạt vượt mức: Đặc tính linh hoạt là 1 trong những điểm khiến tranh cãi trong các dự án lớn. Khi cung ứng quá các tùy chọn cho nhóm phân phát triển, điều này hoàn toàn có thể dẫn mang lại sự đa dạng về phong thái lập trình vào một nhóm. Với kết quả, nó hoàn toàn có thể trở thành một phép tắc không tác dụng cuối cùng cầm vì 1 phần mềm hoạt động.Nguồn khoáng sản hạn chế: tuy nhiên hệ sinh thái của Vue
JS hơi rộng và hỗ trợ đầy đủ các công cụ cần thiết để bước đầu phát triển, dẫu vậy framework này không có quy mô bởi React hoặc Angular. Để đúng chuẩn hơn, chỉ cần so sánh con số plugin bao gồm sẵn cho React và Vue.js, sự khác biệt là hàng nghìn đơn vị. Các plugin hiện gồm thường ko được cung ứng khi sử dụng với những framework khác.
Xem thêm: Công nghệ cấp đông mềm - có lợi ích gì khi bảo quản thực phẩm
3. Một vài vận dụng của Vue
JS là gì
Đánh giá những khía cạnh và kỹ thuật của Vue.js, rất có thể đặt câu hỏi về ứng dụng của nó. Ngoài vấn đề xây dựng các ứng dụng solo trang và làm việc trên các trang web, Vue.js còn phù hợp với nhiều tác vụ khác. Vắt thể:
Xử lý các nguyên mẫu: Vue.js được thiết kế với để tạo nên các nguyên mẫu. Với năng lực liên kết tài liệu mạnh mẽ, nó chất nhận được xử lý nhiều hiệu ứng, shop và đồ họa. Bằng phương pháp nghiên cứu vãn giao diện người dùng của bạn, cài đặt Vue CLI và sử dụng những nguyên mẫu có thể tái sử dụng.Tập trung vào giao diện người dùng: Vue.js triệu tập chủ yếu vào giao diện tín đồ dùng, chỉ yên cầu HTML, CSS và JavaScript để triển khai việc cùng với nó nhưng mà không yêu thương cầu quá nhiều thành phần riêng lẻ cho Vue. Ví dụ, IBM đã thực hiện Vue.js làm cho khung giao diện người tiêu dùng cho nền tảng đám mây của họ, vày nó bao gồm cú pháp dễ dàng học và phụ thuộc vào ít vào HTML, CSS và Java
Script.Hội nhập linh hoạt: nếu như khách hàng có một áp dụng và mong thêm tính năng cửa hàng vào đó, Vue.js hoàn toàn có thể giúp các bạn làm điều đó. Chính vì nó được xây cất trên Java
Script, nó rất có thể dễ dàng tích vừa lòng vào ngẫu nhiên dự án nào thực hiện Java
Script. Hơn nữa, nó tương xứng với nhiều công nghệ back-end và framework như Laravel, Express, Rails với Django.
Mặc dù là nhược điểm, Vue.js vẫn hoàn toàn có thể được sử dụng trong số dự án lớn. Một số trong những công ty thế giới sử dụng Vue.js nhằm xây dựng trang web của họ bao hàm Grammarly, Upwork, Gitlab, Trivago, Nintendo và thậm chí cả Google. List này vẫn còn đấy rất lâu năm và chắc hẳn rằng sẽ tiếp tục được ngã sung.
Qua bài viết trên, bạn đã sở hữu cơ hội nắm rõ hơn về Vue.Js Là Gì? cùng những đặc điểm nổi nhảy của framework này. Mong muốn thông tin trong nội dung bài viết đã mang lại cho bạn những kiến thức và kỹ năng hữu ích về trong những framework thịnh hành nhất của Java
Script. Nếu bạn để ý đến các chủ đề tương tự, hãy thường xuyên đọc những bài viết thú vị không giống từ doanh nghiệp Dịch vụ SEO – xây đắp Website tuyensinhyduocchinhquy.edu.vn!
Diễm Nguyễn
Tôi là Diễm Nguyễn, hiện tại là SEO Manager tại công ty tuyensinhyduocchinhquy.edu.vn. Với trên 3 năm kinh nghiệm thực chiến, tiến hành thành công hơn 500+ dự án Digital Marketing, tôi mong ước sẽ sát cánh cùng các doanh nghiệp trong bài toán xây dựng nền tảng sale phù hợp, hướng đến sự thừa nhận diện thương hiệu thật thuận tiện và phạt triển đơn hàng một cách bền vững.
Trả lời Hủy
Email của các bạn sẽ không được hiển thị công khai. Những trường bắt buộc được khắc ghi *
Bình luận *
Tên *
Email *
Trang web
lưu giữ tên của tôi, email, và website trong trình chăm chú này cho lần comment kế tiếp của tôi.
Đội ngũ support viên của công ty chúng tôi sẽ tương tác với các bạn ngay nhanh chóng sau khi tiếp nhận thông tin đăng ký.
Vui lòng điền vừa đủ các thông tin trong form sẽ được đội ngũ tuyensinhyduocchinhquy.edu.vn tư vấn và làm giá chính xác!
ĐỂ LẠI THÔNG TIN TƯ VẤN
Vui lòng kiểm tra để bảo vệ thông tin ngơi nghỉ trên là bao gồm xác.
Gửi yêu thương cầu
Giới thiệu về tuyensinhyduocchinhquy.edu.vn
tuyensinhyduocchinhquy.edu.vn là đơn vị cung cấp giải pháp Digital Marketing số 1 tại nước ta với công ty sáng lập và cách tân và phát triển bởi chuyên viên trong lĩnh vực Digital kinh doanh – ông Võ Văn Hiếu.
Với các năm vận động trong lĩnh vực này, tuyensinhyduocchinhquy.edu.vn tự tin sẽ mang đến trải nghiệm dịch vụ tuyệt vời hơn bao giờ hết dành cho khách hàng. Trở thành đối tác của cửa hàng chúng tôi để hướng đến sự nhận diện uy tín và phân phát triển giao dịch một cách bền vững.
Phạm vi hoạt động
Hỗ trợ quý khách trên toàn quốc
tuyensinhyduocchinhquy.edu.vn nhận cung ứng trên toàn bộ các tỉnh thành trong toàn nước như: TPHCM, Hà Nội, Hưng Yên, Hải Phòng, Quảng Ninh, Hải Dương, thừa Thiên - Huế, Đà Nẵng, Quảng Nam, Quảng Ngãi, Khánh Hoà, Bình Dương, Đồng Nai, Bà Rịa - Vũng Tàu,...
Hỗ trợ phong phú và đa dạng các mô hình kinh doanh
tuyensinhyduocchinhquy.edu.vn cung ứng nhiều loại hình dịch vụ hỗ trợ cho tất cả các ngành nghề từ thương mại & dịch vụ sửa chữa, xây dựng, thiết kế, nội thất, ngoại thất cho tới du lịch, đơn vị hàng, khách hàng sạn, spa, thời trang, sức khoẻ, y tế, bằng tay thủ công mỹ nghệ...
Danh mục dịch vụ
Dịch vụ SEO WebsiteThiết kế website, tối ưu code web
Tăng vận tốc tải trang website
Viết bài chuẩn chỉnh SEO website, Facebook
Dịch vụ Entity
Dịch vụ review Google Maps, SEO Google Maps
Dịch vụ tăng tương tác, tăng lượt thích Facebook
Dịch vụ thiết lập follow Tiktok
Dịch vụ tăng tim Tiktok
Đào chế tạo ra SEOKhóa học SEOVà nhiều thương mại dịch vụ khác
