Cách xây dựng ứng dụng Vue.js được kết xuất sẵn, thân thiện với SEO

Tôi không thể chịu đựng được nữa. Bảng báo cáo trong nhà của chúng tôi hút!
Quản lý sản phẩm của chúng tôi đã tức giận. Ứng dụng đổ nát mà anh ta đang cố lấy dữ liệu từ đó là thảm họa.
Tối đa, chúng tôi cần báo cáo tốt hơn. Bạn có thể sửa nó không?"
Thật lòng, tôi muốn xây dựng một ứng dụng hoàn toàn mới, tôi đã trả lời, cười toe toét.
"Được thôi, cứ tự nhiên. Carte blush , bạn thân.
Tôi xoa tay, cười toe toét. Cuối cùng, một dịp để sử dụng khuôn khổ JS mọi người được raving về: Vue.js .
Tôi vừa hoàn thành mã hóa ứng dụng đó và tôi thích nó.
Lấy cảm hứng từ kinh nghiệm gần đây của tôi, tôi đã dành chút thời gian để tạo một hướng dẫn Vue.js cho cộng đồng của chúng tôi. Bây giờ, tôi sẽ trình bày chủ yếu hai chủ đề ở đây:
Cách xây dựng ứng dụng web tinh gọn với Vue.js
Cách xử lý Vue.js SEO & prerendering với prerender-spa-plugin
Cụ thể hơn, tôi sẽ hướng dẫn bạn tạo một cửa hàng nhỏ với các trang sản phẩm thân thiện với SEO.
Tôi đã hơi chạm vào Vue trong bài viết CMS không đầu mới nhất của tôi , nhưng bài này sẽ đi sâu hơn nhiều, vì vậy tôi rất phấn khích.
GitHub repo và bản demo Vue trực tiếp

Trước khi chúng tôi bắt đầu, mọi thứ chúng tôi sẽ thảo luận ở đây là nguồn mở và tôi cũng có một ví dụ trực tiếp.

Xem repo mã GitHub

Xem bản demo trực tiếp Vue.js

Vue.js chính xác là gì?

Hãy bắt đầu bằng cách bỏ một ít kiến ​​thức cho những người không quen thuộc với khung tiến bộ.

Vue là một khung JavaScript nhẹ, tiến bộ giúp bạn tạo giao diện web .

Đừng để bị lừa bởi khuôn khổ của JS JS. Đối với Vue khá khác biệt so với các đối tác thời thượng của nó - React.js & Angular.js. Để bắt đầu, nó không phải là sản phẩm phụ nguồn mở của những gã khổng lồ công nghệ thương mại như Google và Facebook.

Evan You lần đầu tiên phát hành nó vào năm 2014, với mục đích tạo ra một thư viện JS hiện đại, có thể chấp nhận được. Đó là một trong những tính năng mạnh mẽ nhất của Vue: tạo các thành phần có thể cắm mà bạn có thể thêm vào bất kỳ dự án nào mà không cần trải qua các nhà tái cấu trúc lớn. Bất kỳ nhà phát triển nào cũng có thể dùng thử Vue trong một dự án mà không gây nguy hiểm hoặc gánh nặng cho cơ sở mã hiện có của nó.

Thuật ngữ mô hình khác nhau, tôi cảm thấy như các tiền đề của Vue là:

1. Bạn không thể biết toàn bộ kiến ​​trúc nhà nước của ứng dụng ngay từ đầu.

2. Dữ liệu của bạn chắc chắn sẽ thay đổi trong thời gian chạy.

Chính xung quanh những ràng buộc này mà thư viện tự hình thành: đó là sự gia tăng, dựa trên thành phần và phản ứng. Kiến trúc dạng hạt của các thành phần cho phép bạn dễ dàng tách các mối quan tâm logic của mình trong khi vẫn duy trì khả năng sử dụng lại cho chúng. Trên hết, nó thực sự liên kết dữ liệu của bạn với các chế độ xem để chúng cập nhật một cách kỳ diệu khi cần thiết (thông qua người theo dõi). Mặc dù định nghĩa tương tự có thể được nói về nhiều khung công tác mặt trước phản ứng, tôi thấy Vue chỉ đạt được nó một cách thanh lịch hơn, và, trong phần lớn các trường hợp sử dụng của tôi, theo cách tốt hơn.

Vue cũng có một đường cong học tập nhẹ nhàng hơn, nói, React, đòi hỏi kiến ​​thức tạo khuôn mẫu của JSX. Người ta thậm chí có thể nói Vue là React trừ đi những phần vụng về.

Để so sánh sâu hơn với các khung JS khác - React, Angular, Ember, Knockout, Polymer, Riot - hãy xem các tài liệu chính thức về chủ đề này.

Cuối cùng nhưng không kém phần quan trọng, hiệu suất và các công cụ phát triển sâu sắc mà Vue cung cấp mang lại trải nghiệm mã hóa tuyệt vời. Không có gì ngạc nhiên khi việc áp dụng nó đang tăng vọt .

Từ các dự án nguồn mở như Laravel & PageKit cho đến các doanh nghiệp như Gitlab & Codeship (không đề cập đến gã khổng lồ Alibaba & Baidu), rất nhiều tổ chức đang sử dụng Vue.

Tuy nhiên, bây giờ là lúc để xem bạn sẽ sử dụng nó ở đây như thế nào .

Ví dụ về Vue.js của chúng tôi: một ứng dụng thương mại điện tử nhanh chóng, thân thiện với SEO

Trong phần này, tôi sẽ chỉ cho bạn cách xây dựng một ứng dụng thương mại điện tử nhỏ bằng Vue 2.0 & Snipcart, nền tảng giỏ hàng HTML / JS của chúng tôi dành cho nhà phát triển. Bạn cũng sẽ thấy làm thế nào để đảm bảo các trang sản phẩm có thể thu thập dữ liệu chính xác cho các bot công cụ tìm kiếm.

Điều kiện tiên quyết

• Kiến thức tối thiểu về Vue.js - bắt đầu từ đây .
• Hiểu biết cơ bản về vuex& vue-router.
• Tài khoản Snipcart (miễn phí mãi mãi trong chế độ Kiểm tra).

Nếu bạn muốn tìm hiểu sâu hơn về tất cả mọi thứ Vue 2.0, thì Laracasts đã giúp bạn bao quát loạt bài này .

1. Thiết lập môi trường

Đầu tiên, sử dụng vue-cli để tạo ra một ứng dụng Vue cơ bản. Trong thiết bị đầu cuối yêu thích của bạn, đầu vào:

npm cài đặt -g vue-cli vue init webpack-đơn giản vue-snipcart

Điều này sẽ tạo một thư mục vue-snipcart mới chứa cấu hình cơ bản bằng cách sử dụng vue-loader. Nó cũng sẽ cho phép bạn viết một thành phần tệp duy nhất (template / js / css trong cùng một tệp .vue).

Tôi muốn bản demo này cảm thấy chân thực nhất có thể, vì vậy, hãy thêm hai mô-đun nữa được sử dụng rộng rãi trong Vue SPA cho các ứng dụng lớn: vuexvà vue-router.

• vuexlà một người quản lý nhà nước giống như thông lượng, thực sự nhẹ nhưng rất mạnh mẽ. Nó bị ảnh hưởng mạnh mẽ bởi Redux, trên đó bạn có thể tìm hiểu thêm ở đây .
• vue-router cho phép bạn xác định các tuyến đường để tự động xử lý các thành phần của ứng dụng.

Để cài đặt chúng, hãy vào thư mục dự án vue-snipcart mới của bạn và chạy các lệnh sau:

cài đặt npm --save vue-router npm intsall --save vuex

Một thứ khác để cài đặt bây giờ là prerender-spa-plugin, cái này sẽ cho phép bạn mở đầu các tuyến đường có thể thu thập dữ liệu:

cài đặt npm --save prerender-spa-plugin

Gần đến rồi. Bốn gói cuối cùng là:

• pugCác mẫu đơn giản, tôi thích điều đó hơn HTML.
• vuex-router-syncTập trung vào một số thông tin bộ định tuyến của bạn trực tiếp trong trạng thái vuex.
• copy-webpack-pluginLàm cho nó dễ dàng hơn để bao gồm các tệp tĩnh trong thư mục dist.
• babel-polyfillBạn có thể chạy Vue bên trong PhantomJS (được sử dụng bởi plugin prerender).

Chạy những thứ này:

npm install --save pug npm install --save vuex-router-sync npm install --save copy-webpack-plugin npm install --save babel-polyfill

2. Lắp ráp kiến ​​trúc

Cài đặt: kiểm tra. Thời gian để thiết lập mọi thứ để nó có thể xử lý dữ liệu của cửa hàng.

Hãy bắt đầu với cửa hàng vuex. Bạn sẽ sử dụng điều này để lưu trữ / truy cập thông tin sản phẩm của chúng tôi.

Đối với bản demo này, tôi sẽ sử dụng dữ liệu tĩnh, mặc dù điều này vẫn hoạt động nếu bạn tìm nạp nó thay thế.

Lưu ý : với Snipcart, chúng tôi đưa vào giỏ hàng một đoạn mã cơ bản và xác định các sản phẩm trong đánh dấu bằng các thuộc tính HTML đơn giản .

2.1 Xây dựng cửa hàng

Tạo một thư mục lưu trữ trong srcmột, cùng với 3 tệp:

• state.js để xác định các sản phẩm tĩnh
• getters.js để xác định hàm get để lấy sản phẩm bằng ID
• index.js để kết hợp hai cái đầu tiên lại với nhau

2.2 Xây dựng bộ định tuyến

Hãy giữ cho cửa hàng cơ bản: trang chủ liệt kê các sản phẩm + trang chi tiết cho từng sản phẩm. Bạn sẽ cần phải đăng ký hai tuyến trong bộ định tuyến để xử lý những điều sau:

Những thành phần này chưa được tạo ra, nhưng không phải lo lắng, chúng sẽ đến sau. ;)

Lưu ý rằng tôi làm việc mode: 'history'trong VueRoutertuyên bố của tôi . Điều này rất quan trọng, vì plugin prerender sẽ không hoạt động khác. Sự khác biệt là bộ định tuyến sẽ sử dụng API lịch sử thay vì hashbang để điều hướng.

2.3 Liên kết mọi thứ với nhau

Bây giờ bạn có cả cửa hàng và bộ định tuyến của mình, bạn sẽ cần phải đăng ký chúng trong ứng dụng. Nhảy vào src/main.jstập tin của bạn và cập nhật nó như sau:

Khá đơn giản phải không? Như đã đề cập trước đó, phương thức đồng bộ hóa từ vuex-router-syncgói tiêm một số thông tin tuyến đường hiện tại trong trạng thái cửa hàng. Nó sẽ hữu ích sau này.

3. Chế tạo các thành phần Vue

Có dữ liệu cảm thấy tuyệt vời, nhưng hiển thị nó thậm chí còn tốt hơn. Bạn có thể sử dụng ba thành phần để đạt được điều đó:

• Home để hiển thị một danh sách sản phẩm
• Product được sử dụng cho từng sản phẩm bởi thành phần Home
• ProductDetails cho các trang sản phẩm riêng lẻ

Mỗi người trong số họ sẽ ở trong src/componentsthư mục.

Ở trên, trạng thái cửa hàng được sử dụng để lấy sản phẩm và lặp lại trên chúng để hiển thị một thành phần sản phẩm cho từng sản phẩm.

Bạn liên kết đến từng trang, được xử lý bởi bộ định tuyến của bạn, đưa chúng tôi đến thành phần cuối cùng của bạn.

Cái này có logic hơn một chút so với cái khác. Bạn nhận được ID hiện tại từ tuyến đường và sau đó lấy sản phẩm được liên kết từ getter được tạo trước đó.

4. Tạo ứng dụng

Hãy sử dụng các thành phần mới của bạn, yeah?

Mở App.vuetệp. Nội dung trong đó vẫn là nội dung mặc định được tạo từ vue init webpack-simplegiàn giáo.

Thay đổi mọi thứ để thay thế:

Thành TopContextphần này không thực sự quan trọng: nó chỉ hoạt động như một tiêu đề. Phần quan trọng là phần router-view: nó sẽ được xác định một cách linh hoạt bởi VueRoutervà thành phần liên quan được xác định trước đó sẽ được đưa vào thay thế.

Quan điểm cuối cùng để cập nhật là index.html. Đối với trường hợp sử dụng này, hãy tạo một thư mục tĩnh mới trong srcmột. Ở đó, bạn sẽ di chuyển tệp chỉ mục và cập nhật như sau:

Bạn có thể thấy tôi đã thêm các tập lệnh cần thiết của Snipcart trong chế độ xem mặc định. Một thành phần nhỏ bao gồm chúng có thể sạch hơn, nhưng vì tất cả các khung nhìn đều cần chúng, tôi đã làm theo cách này.

5. Xử lý SEO Vue.js bằng plugin Prerender

Mọi thứ trong ứng dụng được hiển thị linh hoạt với JS, không phù hợp với SEO: nội dung không đồng bộ của các trang không thể được thu thập tối ưu bởi các bot công cụ tìm kiếm. Sẽ không thông minh khi có một trang web thương mại điện tử bỏ lỡ tất cả cơ hội giao thông hữu cơ đó!

Hãy sử dụng tính năng chuẩn bị trước để mang lại nhiều cơ hội SEO hơn cho ứng dụng Vue.js của bạn.

So với Vue SSR (Kết xuất phía máy chủ), việc cài đặt trước dễ dàng hơn nhiều để thiết lập. Và thật lòng mà nói, trước đây thường là quá mức cần thiết , trừ khi bạn xử lý nhiều tuyến đường. Thêm vào đó, cả hai đều đạt được kết quả khá giống nhau ở cấp độ SEO.

Prerendering sẽ cho phép bạn giữ giao diện người dùng của bạn dưới dạng một trang web tĩnh nhanh, nhẹ, dễ dàng thu thập dữ liệu.

Hãy xem cách bạn có thể sử dụng nó. Chuyển đến tệp webpack của bạn và thêm khai báo sau vào xuất cấp cao nhất của bạn:

Được rồi, vậy làm thế nào để làm việc này?

Các CopyWebpackPluginsẽ sao chép thư mục tĩnh của bạn (chỉ chứa các điểm tham khảo Vue App của chúng tôi) vào thư mục TP của bạn. Sau đó, PrerenderSpaPluginsẽ sử dụng PhantomJS để tải nội dung các trang của bạn và sử dụng kết quả làm tài sản tĩnh.

Và Voila! Bây giờ bạn đã có các trang sản phẩm thân thiện với SEO cho ứng dụng Vue.

Bạn có thể tự kiểm tra bằng lệnh sau:

chạy npm xây dựng

Điều này sẽ tạo ra một thư mục dist chứa mọi thứ cần thiết cho sản xuất.

Những cân nhắc SEO quan trọng khác

1. Xem xét thêm thẻ meta phù hợp & sơ đồ trang web cho các trang ứng dụng của bạn. Bạn có thể tìm hiểu thêm về các thẻ meta trong chức năng của post postcesscessTtml tại đây .
2. Nội dung tuyệt vời đóng một vai trò rất lớn trong SEO hiện đại. Tôi khuyên bạn nên đảm bảo nội dung trên ứng dụng của bạn dễ dàng tạo, chỉnh sửa và tối ưu hóa. Để trao quyền cho các biên tập viên nội dung, hãy xem xét việc ném một CMS không đầu vào hỗn hợp và xây dựng một JAMstack thực sự .
3. Một liên kết HTTPS hiện chính thức là một yếu tố xếp hạng cho Google. Tôi đang lưu trữ bản demo này trên Netlify , nơi cung cấp chứng chỉ SSL miễn phí với tất cả các gói.
4. Điện thoại di động đầu tiên lập chỉ mục & điện thoại di động thân thiện với như một yếu tố xếp hạng là, tốt, thực sự. Đảm bảo trải nghiệm di động của bạn nhanh và đầy đủ như máy tính để bàn!

Phần kết luận

Vì tôi đã làm việc với Vue trước đây, việc xây dựng hướng dẫn này diễn ra khá suôn sẻ. Tôi phải dành một giờ cho bản demo. Tôi đã vật lộn một chút để đi CopyWebpackPluginlàm, nhưng cuối cùng cũng tìm thấy câu trả lời trong tài liệu của họ.

Tôi hy vọng bài đăng này khuyến khích các nhà phát triển bắt đầu sử dụng Vue trong một số dự án. Như tôi đã nói, bạn có thể bắt đầu từ từ, bằng cách phát triển một phần nhỏ của một dự án hiện có với nó. Tôi nghĩ rằng nó chắc chắn đáng để thử. Nhà phát triển chính của chúng tôi đang mã hóa tính năng bảng điều khiển thương mại mới nhất của chúng tôi với Vue khi tôi viết bài này và anh ấy thích nó. Thêm vào đó, khi được thiết lập đúng, một ứng dụng Vue có thể mang lại kết quả SEO tốt.

Nếu bạn cảm thấy muốn được truyền cảm hứng trước tiên, hãy xem danh sách Vue.js Awesome , điều chỉnh vô số các ví dụ và dự án của Vue.

Và nếu bạn thực sự đào Vue, hãy xử lý một số swag hoặc hỗ trợ người tạo !

Nếu bạn thấy bài đăng này có giá trị, hãy dành một giây để chia sẻ nó trên Twitter . Tìm thấy một cái gì đó tôi bỏ lỡ? Bạn có suy nghĩ về Vue, các khung công tác khác hoặc xử lý SEO với chúng không? Bình luận là của bạn!

---

Ban đầu tôi đã xuất bản nó trên Blog Snipcart và chia sẻ nó trong bản tin của chúng tôi .