Skip to main content

Vitepress và Vuejs

Xem cách theo dõi lỗi được hỗ trợ bởi AI của LogRocket hoạt động​

không cần đăng ký​

Hãy kiểm tra nó

Vitepress là trình tạo trang web tĩnh được hỗ trợ bởi Vite và Vue.js đang nhanh chóng trở nên phổ biến trong thế giới frontend. Nó có các tính năng tuyệt vời giúp đơn giản hóa việc xây dựng các trang web tĩnh và cung cấp các chức năng tối thiểu mà không ảnh hưởng đến hiệu suất. Với Vitepress, bạn có thể thiết kế các trang và nội dung của mình bằng Markdown và các chủ đề khác nhau để xây dựng các trang web nhanh hơn.

Xây dựng Blog với Vitepress và Vue.js

Bài viết này nhằm mục đích giúp bạn làm quen với Vitepress bằng cách xây dựng blog bằng Vitepress và Vue.js với Markdown.

Nhảy tới trước:

Vite và Vitepress là gì?​

Vitepress, như tên gọi của nó, được cung cấp bởi Vite . Vite thay thế các công cụ như Rollup và Webpack và hướng đến giải quyết các điểm yếu của Webpack và các công cụ xây dựng frontend khác. Các lợi ích chính của việc sử dụng Vite là:

  • Khởi động máy chủ nhanh hơn
  • Tải lại mô-đun nóng tức thời (HMR)
  • Ít thời gian cấu hình hơn

Bạn có thể tìm hiểu thêm thông tin chi tiết về Vite tại đây .

Webpack mất nhiều thời gian hơn để khởi động máy chủ phát triển, điều này có thể khiến các nhà phát triển không thể chịu đựng được. Khi trang tài liệu trở nên lớn hơn, việc làm việc với Webpack trở nên rất khó chịu. Đây là động lực chính để phát triển Vitepress. Nếu bạn đã từng làm việc với Vuepress trước đây, Vitepress rất giống nhau và cả hai khuôn khổ đều tập trung vào việc xây dựng các trang tài liệu một cách dễ dàng. Một điểm khác biệt là Vuepress sử dụng Webpack và Vitepress sử dụng Vite.

Thay vì tái cấu trúc cơ sở mã của Vuepress, Evan You , người sáng lập Vue và Vitepress, đã tạo ra trình tạo trang tĩnh mới hỗ trợ Vite và Vue 3. Bố cục của chúng cũng được thiết kế cho các trang tài liệu. Tuy nhiên, bạn cũng có thể tạo bố cục.

Vì đang trong giai đoạn alpha, Vitepress vẫn còn thiếu nhiều tính năng hơn Vuepress, nhưng cũng rất dễ sử dụng vì nhóm phát triển Vitepress muốn giữ cho nó ở mức tối giản.

Cần lưu ý rằng Vitepress không hỗ trợ hệ sinh thái Vuepress hiện tại vì nhóm Vitepress muốn giữ API chủ đề ở mức tối thiểu để có thể tùy chỉnh trong chủ đề. Để tìm hiểu thêm về cách Vitepress khác với Vuepress, hãy tham khảo tài liệu chính thức của họ .

Xây dựng blog với Vitepress và Vue.js​

Mặc dù Vitepress có thể được sử dụng để xây dựng các trang tài liệu được thiết kế tốt một cách nhanh chóng, bạn có thể mở rộng các tính năng của Vitepress để phát triển blog của mình. Trong bài viết này, chúng ta sẽ tập trung vào việc tạo blog và tìm hiểu về chủ đề và tùy chỉnh trong Vitepress.

Sau khi đọc xong bài viết, bạn có thể phát triển trang web tài liệu hoặc blog của mình bằng Vitepress và Vue 3. Nhưng trước khi tìm hiểu sâu hơn về bài viết, hãy đảm bảo rằng bạn đã có hiểu biết cơ bản về Vue 3.

Tạo một trang web tĩnh với Vitepress​

Bắt đầu với Vitepress cực kỳ dễ dàng. Bạn có thể bắt đầu xây dựng trang web của mình bằng Vitepress bằng cách cài đặt hai gói dành cho nhà phát triển chính. Trên thư mục làm việc của bạn, hãy cài đặt vuevà vitepressnhư các phụ thuộc dành cho nhà phát triển.

Để cài đặt các gói, hãy chạy các lệnh sau:

npm i - D vue vitepress

Cờ sẽ cài đặt các gói như các phụ thuộc của nhà phát triển. Bây giờ, hãy tạo một thư mục bên trong thư mục làm việc và đặt tên cho nó theo ý bạn. Thông thường, thư mục có tên là , vì vậy tôi cũng sẽ sử dụng tên cho thư mục.-D``docs``docs

Sau khi tạo docs, bạn sẽ cần thêm một số scriptsvào tệp của mình. Sao chép nội dung sau và dán chúng vào tệp của bạn:package.json``scripts``package.json

"scripts" : { "docs:dev" : "tài liệu dev của vitepress" , "docs:build" : "tài liệu build của vitepress" , "docs:serve" : "tài liệu phục vụ của vitepress" },

Cổng phát triển mặc định cho Vitepress là . Tệp sẽ đóng vai trò là tệp hoặc điểm vào cho trang tĩnh Vitepress của bạn. Nếu bạn truy cập URL, bạn sẽ có thể xem trang Vitepress của mình. Vitepress đi kèm với một chủ đề mặc định. Bạn có thể sử dụng các tùy chọn khác nhau mà chủ đề cung cấp để tùy chỉnh trang web của mình.localhost:5173``index.md``index.html

Tuy nhiên, vì tệp này trống nên bạn sẽ không thể thấy bất cứ thứ gì. Bạn có thể thêm một số văn bản để xem những thay đổi trên trang Vitepress của mình. Để tùy chỉnh các tính năng, hãy tạo một thư mục có tên (hãy cẩn thận với dấu chấm ở đầu) bên trong . Thư mục này được sử dụng để cấu hình các tùy chọn Vitepress.index.md``index.md``.vitepress``docs

Có thể thực hiện ba loại cấu hình trên Vitepress: cấu hình ứng dụng, cấu hình chủ đề và cấu hình front matter. Cấu hình ứng dụng bao gồm các tính năng như tiêu đề trang web, tùy chỉnh trình phân tích cú pháp Markdown, v.v. Đồng thời, cấu hình chủ đề xác định giao diện của ứng dụng. Ví dụ: nếu bạn muốn thêm thanh điều hướng vào trang web của mình, bạn sẽ cần cập nhật cấu hình chủ đề.

Cấu hình phần đầu có thể ghi đè lên cấu hình chung cho một trang cụ thể, cấu hình ứng dụng và cấu hình chủ đề.

Cấu hình Vitepress​

Tạo một tệp có tên bên trong tệp này. Vitepress sẽ đọc tệp này để tùy chỉnh ứng dụng của bạn. Tệp này cũng có thể được tạo bằng các phần mở rộng như , , v.v.config.js``.ts``.mjs``.mts

Chúng ta hãy xem một tệp giả để hiểu cách tùy chỉnh chủ đề:config.js

export default { title : 'Blog của tôi' , description : 'Chỉ đang thử nghiệm thôi.' , themeConfig : { nav : [ { text : 'Trang chủ' , link : '/' }, { text : 'Blog' , link : '/articles/' }, { text : 'Ngoài' , link : 'https://google.com' }, ], }, };

Thêm headkhóa cũng có thể thêm các liên kết cụ thể cho phông chữ Google hoặc tệp CSS vào đầu. Bạn có thể tìm thấy tất cả các tùy chọn cấu hình ứng dụng tại đây .

Cấu hình chủ đề có thể được thêm vào đối tượng bằng themeConfigkhóa, như được hiển thị ở trên. navMảng xác định các thành phần trong thanh điều hướng và bạn cũng có thể thêm menu thả xuống cho các mục điều hướng. Sau đây là ví dụ về cách sử dụng:

xuất mặc định { themeConfig : { nav : [ { text : 'Hướng dẫn' , liên kết : '/guide' }, { text : 'Menu thả xuống' , mục : [ { text : 'Mục A' , liên kết : '/item-1' }, { text : 'Mục B' , liên kết : '/item-2' }, { text : 'Mục C' , liên kết : '/item-3' } ] } ] } }

Thêm bài viết vào blog bằng Vitepress và Vue​

Bây giờ, hãy thêm một số bài đăng vào blog của chúng ta. Tạo một thư mục có tên articlesbên trong docsthư mục và thêm bất kỳ bài đăng nào ở định dạng Markdown. Ví dụ, hãy thêm một bài đăng Markdown có tên là .article1.md

Bây giờ, hãy mở tệp chúng ta đã tạo trước đó và thêm liên kết. Tệp Markdown sẽ trông như thế này:index.md``article1.md``index.md

[ Bài viết 1 ]( /articles/ article1 )

Thêm điều này sẽ hiển thị bài đăng như bên dưới trên trang chủ của bạn:

Bản demo của trang chủ Vitepress

Nếu bạn nhấp vào liên kết, nó sẽ hiển thị tệp Markdown của bạn dưới dạng trang HTML. Một điều tuyệt vời về Vitepress là bạn có thể thêm các thành phần Vue 3 trực tiếp vào tệp Markdown của mình để cấu hình trang chủ dễ dàng.

Thiết kế thẻ bài đăng trên blog trên trang chủ​

Hãy thêm một thẻ bài đăng blog vào trang chủ. Tạo một componentsthư mục bên trong docs. Bây giờ, tạo một tệp có tên là . Một thành phần Vue có thể chứa , , và . Trước tiên, hãy xem xét :ArticleCard.vue``template``script``style``template

<template> < a : href = "href" > < div class = " card " > < div class = " flex " > < div class = " media " > < img : src = " image " : alt = " title" / > </div> < div class = "details" > < h2 class = " title" > {{ title }} </h2> < p class = "excerpt" > {{ truncateText ( trích đoạn , 50 ) } } </p> < div class = " author " > < div > < h3 class = " name " > { { author } } </h3> < p class = " date " > { { date } } </p> </div> </div> </div> </div> < / div > </a> </template>
   
     
       
         
             
        
         
           
             
           
            
               
               
            
          
        
      
    
  
<script> export default { props : { title : { type : String , required : true , }, excerpt : { type : String , required : true , } , image : { type : String , required : true , }, author : { type : String , required : true , }, date : { type : String , required : true , } , href : { type : String , required : true , } , }, methods : { 
    truncateText ( text , length ) { if ( text . length > length ) { return text .substring ( 0 , length ) + " ..." ; } return text ; } , }, } ; </script>

Các prop cho thẻ là title, excerpt, image, author, date, và href. Tên của các prop tự giải thích. Cùng với đó, chúng ta có một hàm cắt bớt kích thước đoạn trích. Nó lấy một số văn bản và độ dài của các ký tự làm đối số và trả về một văn bản cắt bớt với các dấu chấm theo sau. Tôi sẽ không giải thích về kiểu dáng cơ bản vì tôi cho rằng bạn biết những điều cơ bản về CSS .

Các kiểu dáng cho thành phần này được hiển thị bên dưới:

< style scoped > .card { 
  border - radius : 0,5 rem ; 
  box - shadow : 0 0,5 rem 1 rem rgba ( 0 , 0 , 0 , 0,15 ); 
  margin - bottom : 1,5 rem ; 
  overflow : hidden ; 
  width : 100 % ; }
         


. card : hover { 
  hộp - bóng : 0 0,5 rem 1 rem rgba ( 0 , 0 , 0 , 0,25 ); 
  chuyển đổi : ease - in - out 0,2 s tất cả ; }      


. flex { hiển thị : flex ; }
  


. phương tiện { chiều rộng : 45 %; 
  chiều cao : 100 %; 
  đối tượng - vừa vặn : bìa ; 
  đối tượng - vị trí : trung tâm ; }
    


. chi tiết { 
  lề - trái : 1,2 rem ; } 


. tiêu đề { 
  đường viền - trên cùng : không có ; 
  lề : 0 0 ; }  


. tên { lề : 0 0 ; cỡ 
  chữ : 0,7 rem ; 
  màu : # 999 ; } < / kiểu >
      

<template> < div class = " hero" > < div class = " hero-body" > < div class = "container" > < h1 class = "title" > Xin chào , tôi là { { name || " John Doe " } } . </h1> < h2 class = " subtitle " > { { subtitle } } </h2> </div> </div> </div> < / / template >
   
     
       
           
         
          
        
      
    
  


<script> xuất mặc định { props 
  : { name 
    : { type 
      : String , required 
      : true , } , subtitle 
    : { type 
      : String , required 
      : true , } , } , } ; </script>
      
       
    
  



<style> h2.subtitle { cỡ chữ : 1.2rem ; đường viền : không có ; } </style>
 
   
  

< thiết lập tập lệnh > nhập Hero từ './components/Hero.vue' nhập ArticleCard từ './components/ArticleCard.vue' < / tập lệnh >
     
     


< Tên anh hùng = "Nemo" phụ đề = "Chào mừng đến với blog của tôi. Blog này được xây dựng bằng Vitepress và Vue.js. Vitepress rất tuyệt." / > 

< Tiêu đề ArticleCard = "Bài viết 1" trích đoạn = "Lorem i" hình ảnh = "https://images.unsplash.com/photo-1664663751485-c58e9276ccce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1167&q=80" tác giả = "John Doe" href = "/articles/article1" ngày = "2022-08-01" />

Trang chủ của bạn bây giờ sẽ trông như thế này:

Blog với Vue.js và Vitepress Component

Hiện tại, chúng tôi có các màu mặc định do Vitepress thiết lập. Bạn có thể tùy chỉnh màu của thành phần thông qua stylethẻ trong thành phần. Đối với các tệp dành riêng cho Markdown, bạn cũng có thể ghi đè các kiểu mặc định. Bạn có thể tham khảo tài liệu để biết thêm chi tiết.

Hiện tại, có một vấn đề với blog. Sẽ là một ý tưởng tồi tệ khi phải tự tay thêm tất cả các bài viết vào tệp chỉ mục mỗi khi bạn thêm một bài viết mới. Vậy, chúng ta phải sửa lỗi này như thế nào?.md

Truy cập vào nội dung chính trong Vitepress​

Vuepress có hỗ trợ tích hợp cho việc lấy front matter. Bạn có thể truy cập chi tiết front matter bằng cách truy cập $sitebiến. Nhưng Vitepress thì không. Để giữ Vitepress ở mức tối thiểu, nó không hỗ trợ. Chúng ta phải tự tìm cách thực hiện việc này.

Một cách để thực hiện điều này là viết một tập lệnh đơn giản để lấy thông tin chi tiết về phần đầu và ghi vào một JSONtệp.

Chúng ta hãy xem một đoạn mã đơn giản để thực hiện việc này:

// Ghi công cho Divyansh Singh // Twitter: @_brc_dd


nhập fs từ 'node:fs/promises' ; nhập matter từ 'gray-matter' ; nhập removeMd từ 'remove-markdown' ; 
 
 

const articles = await fs . readdir ( './docs/articles' ); 

const data = await Promise . tất cả ( 
  các bài viết . bản đồ ( async ( bài viết ) => { const file = vấn đề . đọc ( `./ docs / bài viết / $ { bài viết } ` , { trích đoạn : đúng , trình phân tách trích đoạn : '     
     
       
       

' , }); const { dữ liệu , trích đoạn , đường dẫn } = tệp ; const nội dung = removeMd ( trích đoạn ) . trim () . split ( ) . return { ... dữ liệu , tiêu đề : nội dung [ 0 ]. thay thế ( /\s{2,}/ g , '' ). trim () , đường dẫn : đường dẫn . thay thế ( './docs/' , '' ). thay thế ( /\.md$/ , '.html' ), trích đoạn : nội dung
 . slice ( 1 ) . join ( '' ) . thay thế ( /\s{2,}/ g , '' ) . trim () , }; }) ); await fs . writeFile ( './data.json' , JSON . stringify ( dữ liệu ), 'utf-8' );

Hoàn thiện blog với Vitepress và Vue.js​

Bây giờ chúng ta hãy thảo luận về tập lệnh. Bước đầu tiên là đọc thư mục lưu trữ các bài viết. Trong trường hợp này, các bài viết nằm trong thư mục. Chúng ta đang lưu trữ các giá trị bên trong thư mục trong một biến có tên là .docs/articles``articles

Bây giờ, bên trong Promise, chúng ta sẽ ánh xạ qua từng mục có sẵn bên trong articlesthư mục. Markdown được đọc bằng hàm có sẵn trong gói gray-matter. Hàm này trả về tất cả thông tin cần thiết như , , v.v. Nó cũng chứa một đối tượng lưu trữ các chi tiết của phần đầu.matter.read``path``excerpt``data

Thêm nhiều bài viết tuyệt vời từ LogRocket:​

Đoạn trích được đọc bằng cách đọc quote( >) sau tiêu đề. Đối với <!-- more -->divider, nó sẽ coi quote là đoạn trích. Divider được định nghĩa trong đoạn mã trên như sau excerpt_separator:

--- Tác giả : Nemo Cập nhật : 2022 - 06 - 01 
hình ảnh : https :// hình ảnh . unsplash . com / ảnh - 1664575198263 - 269 a 0 2 2 d 6 e 1 4 ? ixlib = rb - 1.2 . 1 & ixid = MnwxMjA 3 fDF 8 MHxwaG 9 0 x 1 wYWdlfHx 8 fGVufDB 8 fHx 8 & auto = format & fit = crop & w = 1170 & q = 80 --- # Si speed ad caput
 > lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua

Trong data, đường dẫn được thay thế từ đến để hiển thị dưới dạng HTML. Lưu dưới dạng . Nếu muốn, bạn cũng có thể giữ nguyên mà không cần bất kỳ phần mở rộng nào../docs/articles/article.md``/articles/article.html``script``getArticles.mjs

Phần mjsmở rộng được sử dụng để chúng ta có thể sử dụng các mô-đun ECMAScript . Dữ liệu được tạo ra từ scriptđược ghi vào một  tệp ở định dạng JSON. Để chạy phần mở rộng này mỗi khi bắt đầu một bản dựng mới, hãy thay đổi gói của bạn thành:data.json``script``scripts

"scripts" : { "docs:dev" : "node getArticles.mjs && vitepress dev docs" , "docs:build" : "node getArticles.mjs && vitepress build docs" , "docs:serve" : "vitepress serve docs" },

Bây giờ, trên trang chủ, hãy lặp lại các bài viết và hiển thị chúng trong ArticleCard. Một vòng lặp đơn giản có thể được sử dụng để hiển thị các bài viết. Hãy cùng xem trang cuối cùng:v-for``index.md

< thiết lập tập lệnh > nhập Hero từ './components/Hero.vue' nhập ArticleCard từ './components/ArticleCard.vue'
     
     

  nhập dữ liệu từ '../data.json' < / script >  


< Tên anh hùng = "Nemo" phụ đề = "Chào mừng đến với blog của tôi. Blog này được xây dựng bằng Vitepress và Vue.js. Vitepress rất tuyệt." / > 

< div  v - for = "(bài viết, chỉ mục) trong dữ liệu" : key = "chỉ mục" > < ArticleCard : title = "article.title" : excerpt = "article.excerpt" : image = "article.image" : author = "article.Author" : href = "article.path" : date = "article.Updated" /> </ div >

Trang blog với Vitepress và Vue.js

Blog của bạn đã sẵn sàng!

Bạn có thể truy cập kho lưu trữ Stackblitz này để kiểm tra phiên bản đang hoạt động hoặc bạn cũng có thể kiểm tra kho lưu trữ GitHub để biết mã đầy đủ.

Phần kết luận​

Mục đích của bài viết là giúp bạn bắt đầu với Vitepress. Bài viết hướng dẫn bạn cách mở rộng Vitepress để xây dựng blog và tùy chỉnh các trang theo ý muốn. Vitepress cung cấp phương pháp tối giản để xây dựng các trang tĩnh cho các trang tài liệu hoặc blog.

Vitepress vẫn đang trong giai đoạn alpha, vì vậy mọi thứ có thể bị hỏng. Tốt nhất là không nên sử dụng Vitepress cho các ứng dụng sản xuất của bạn ngay bây giờ. Nhưng nếu bạn muốn khám phá thêm về thư viện, bạn có thể xem tài liệu .

Trải nghiệm ứng dụng Vue của bạn chính xác như cách người dùng làm​

Gỡ lỗi ứng dụng Vue.js có thể khó, đặc biệt là khi có hàng chục, nếu không muốn nói là hàng trăm đột biến trong một phiên người dùng. Nếu bạn quan tâm đến việc giám sát và theo dõi các đột biến Vue cho tất cả người dùng của mình trong quá trình sản xuất, hãy thử LogRocket .

Biểu ngữ dùng thử miễn phí LogRocket Dashboard

LogRocket giống như một DVR cho các ứng dụng web và di động, ghi lại mọi thứ xảy ra trong ứng dụng Vue của bạn, bao gồm các yêu cầu mạng, lỗi JavaScript, sự cố hiệu suất và nhiều hơn nữa. Thay vì đoán lý do tại sao sự cố xảy ra, bạn có thể tổng hợp và báo cáo về trạng thái ứng dụng của mình khi sự cố xảy ra.

Plugin LogRocket Vuex ghi lại các đột biến Vuex vào bảng điều khiển LogRocket, cung cấp cho bạn bối cảnh về nguyên nhân dẫn đến lỗi và trạng thái của ứng dụng khi sự cố xảy ra.

Hiện đại hóa cách gỡ lỗi ứng dụng Vue của bạn — bắt đầu giám sát miễn phí .

5:11:04 AM