使用Vue.js和MJML創(chuàng)建響應式電子郵件

更新時間：2021年03月22日 10:26:54 作者：杜尼卜

這篇文章主要介紹了使用Vue.js和MJML創(chuàng)建響應式電子郵件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

MJML是一種現(xiàn)代的電子郵件工具，使開發(fā)人員可以在所有設備和郵件客戶端上創(chuàng)建美觀、響應迅速的出色電子郵件。這種標記語言是為了減少編寫響應式電子郵件的痛苦而設計的。

它的語義語法使其易于使用。它還具有功能豐富的標準組件，可縮短開發(fā)時間。在本教程中，我們將使用MJML構建漂亮的響應式郵件，并在多個郵件客戶端上進行測試。

開始MJML

你可以使用npm安裝MJML，以將其與Node.js或CLI結合使用：

$ npm install -g mjml

構建我們的電子郵件

首先，請創(chuàng)建一個名為 email.mjml 的文件，盡管你也可以選擇其他任何名稱。創(chuàng)建文件后，我們的響應式電子郵件將分為以下幾部分：

公司header
圖片header
Email介紹
欄目部分
圖標
社交圖標

欄目

這些部分是我們響應式電子郵件的框架。如上所示，我們的電子郵件將分為六個部分，在我們的 email.mjml 文件中：

<mjml>
 <mj-body>
  <!-- 公司 Header -->
  <mj-section background-color="#f0f0f0"></mj-section>
  <!-- 圖片 Header -->
  <mj-section background-color="#f0f0f0"></mj-section>
  <!-- Email 介紹 -->
  <mj-section background-color="#fafafa"></mj-section>
  <!-- 欄目部分 -->
  <mj-section background-color="white"></mj-section>
  <!-- 圖標 -->
  <mj-section background-color="#fbfbfb"></mj-section>
  <!-- 社交圖標 -->
  <mj-section background-color="#f0f0f0"></mj-section>
 </mj-body>
</mjml>

從上面可以看到，我們正在使用兩個MJML組件：mj-body 和 mj-section。mj-body 定義了我們電子郵件的起點，而 mj-section 定義了一個包含其他組件的節(jié)。

對于定義的每個部分，還定義了具有各自十六進制值的 background-color 屬性。

公司 Header

我們電子郵件的此部分僅在中心橫幅位置包含我們的公司/品牌名稱：

<!-- 公司 Header -->
<mj-section background-color="#f0f0f0">
 <mj-column>
  <mj-text font-style="bold"
    font-size="20px"
    align="center"
    color="#626262">
  Central Park Cruise
  </mj-text>
 </mj-column>
</mj-section>

mj-column 組件是用來定義一個列。mj-text 組件用于我們的文本內容，并采取字體樣式、字體大小、顏色等樣式屬性。

圖片 Header

在本部分中，我們將有一個背景圖片和一段文字，它們應代表我們的公司口號。我們還會有一個號召性用語按鈕，指向一個包含更多詳細信息的頁面。

要添加圖片標題，你必須將該部分的背景顏色替換為 background-url。與第一個標題相似，你將不得不在垂直和水平方向上居中放置文本，padding保持不變。

按鈕的 href 設置按鈕的位置。為了讓背景在列中呈現(xiàn)全寬，將列寬設置為600px，width=“600px"。

我們的電子郵件的這一部分將只包含我們的公司/品牌名稱的中心橫幅位置。

<!-- Image Header -->
<mj-section background-url="https://ca-times.brightspotcdn.com/dims4/default/2af165c/2147483647/strip/true/crop/2048x1363+0+0/resize/1440x958!/quality/90/?url=https%3A%2F%2Fwww.trbimg.com%2Fimg-4f561d37%2Fturbine%2Forl-disneyfantasy720120306062055"
      background-size="cover"
      background-repeat="no-repeat">
 <mj-column width="600px">
  <mj-text align="center"
       color="#fff"
       font-size="40px"
       font-family="Helvetica Neue">Christmas Discount</mj-text>
  <mj-button background-color="#F63A4D" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
   See Promotions
  </mj-button>
 </mj-column>
</mj-section>

要使用圖像header，我們將向 jms -section 組件添加 background-url 屬性，然后使用 background-size 和 background-repeat 屬性設置圖像的樣式。

對于我們的口號文本塊，我們使用 align 屬性將文本在水平和垂直方向上居中對齊。你還可以根據需要設置文本顏色，字體大小，字體系列等。

號召性用語按鈕是使用 mj-button 組件實現(xiàn)的。background-color 屬性允許我們指定按鈕的背景色，然后使用 href 指定鏈接或頁面的位置。

Email件介紹

簡介文字將由標題，主體文字和號召性用語組成。

<!-- Intro text -->
<mj-section background-color="#fafafa">
 <mj-column width="400px">
  <mj-text font-style="bold"
       font-size="20px"
       font-family="Helvetica Neue"
       color="#626262">Ultimate Christmas Experience</mj-text>
  <mj-text color="#525252">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus.
  </mj-text>
  <mj-button background-color="#F45E43" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Learn more</mj-button>
 </mj-column>
</mj-section>

欄目部分

在這封郵件的部分，我們會有兩欄：一欄是描述性的圖片，二欄是我們的文字塊，用來補充第一部分的圖片。

<!-- Side image -->
<mj-section background-color="white">
 <!-- Left image -->
 <mj-column>
  <mj-image width="200px"
       src="https://navis-consulting.com/wp-content/uploads/2019/09/Cruise1-1.png"/>
 </mj-column>
 <!-- right paragraph -->
 <mj-column>
  <mj-text font-style="bold"
       font-size="20px"
       font-family="Helvetica Neue"
       color="#626262">
   Amazing Experiences
  </mj-text>
  <mj-text color="#525252">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Proin rutrum enim eget magna efficitur, eu semper augue semper. 
   Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus 
   lectus.
  </mj-text>
 </mj-column>
</mj-section>

左側的第一列使用 mj-image 組件指定要使用的圖像。該圖像可以是本地文件，也可以是遠程托管的圖像（在我們的情況下是這樣）。

右側的第二列包含兩個文本塊，一個用于我們的標題，另一個用于主體文本。

圖標

圖標部分將分為三列。你還可以添加更多內容，具體取決于你希望電子郵件的外觀。

<!-- Icons -->
<mj-section background-color="#fbfbfb">
 <mj-column>
  <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0l.png" />
 </mj-column>
 <mj-column>
  <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x01.png" />
 </mj-column>
 <mj-column>
  <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0s.png" />
 </mj-column>
</mj-section>

每列都有其自己的 mj-image 組件，用于渲染圖標圖像。

社交圖標

本部分將包含指向我們的社交媒體帳戶的圖標。

<mj-section background-color="#e7e7e7">
 <mj-column>
  <mj-social>
   <mj-social-element name="instagram" />
  </mj-social>
 </mj-column>
</mj-section>

MJML帶有 mj-social 組件，可輕松用于顯示社交媒體圖標。在我們的電子郵件中，我們使用了 Twitter mj-social-element。

全部放在一起

至此，我們已經實現(xiàn)了所有部分，完整的 email.mjml 應該如下所示：

<mjml>
 <mj-body>
  <!-- Company Header -->
  <mj-section background-color="#f0f0f0">
   <mj-column>
    <mj-text font-style="bold"
         font-size="20px"
         align="center"
         color="#626262">
     Central Park Cruises
    </mj-text>
   </mj-column>
  </mj-section>
  <!-- Image Header -->
  <mj-section background-url="https://ca-times.brightspotcdn.com/dims4/default/2af165c/2147483647/strip/true/crop/2048x1363+0+0/resize/1440x958!/quality/90/?url=https%3A%2F%2Fwww.trbimg.com%2Fimg-4f561d37%2Fturbine%2Forl-disneyfantasy720120306062055"
        background-size="cover"
        background-repeat="no-repeat">
   <mj-column width="600px">
    <mj-text align="center"
         color="#fff"
         font-size="40px"
         font-family="Helvetica Neue">Christmas Discount</mj-text>
    <mj-button background-color="#F63A4D" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
     See Promotions
    </mj-button>
   </mj-column>
  </mj-section>
  <!-- Email Introduction -->
  <mj-section background-color="#fafafa">
   <mj-column width="400px">
    <mj-text font-style="bold"
         font-size="20px"
         font-family="Helvetica Neue"
         color="#626262">Ultimate Christmas Experience</mj-text>
    <mj-text color="#525252">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus.
    </mj-text>
    <mj-button background-color="#F45E43" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Learn more</mj-button>
   </mj-column>
  </mj-section>
  <!-- Columns section -->
  <mj-section background-color="white">
   <!-- Left image -->
   <mj-column>
    <mj-image width="200px"
         src="https://navis-consulting.com/wp-content/uploads/2019/09/Cruise1-1.png"/>
   </mj-column>
   <!-- right paragraph -->
   <mj-column>
    <mj-text font-style="bold"
         font-size="20px"
         font-family="Helvetica Neue"
         color="#626262">
     Amazing Experiences
    </mj-text>
    <mj-text color="#525252">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Proin rutrum enim eget magna efficitur, eu semper augue semper. 
     Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus 
     lectus.
    </mj-text>
   </mj-column>
  </mj-section>
  <!-- Icons -->
  <mj-section background-color="#fbfbfb">
   <mj-column>
    <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0l.png" />
   </mj-column>
   <mj-column>
    <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x01.png" />
   </mj-column>
   <mj-column>
    <mj-image width="100px" src="https://191n.mj.am/img/191n/3s/x0s.png" />
   </mj-column>
  </mj-section>
  <!-- Social icons -->
  <mj-section background-color="#e7e7e7">
   <mj-column>
    <mj-social>
     <mj-social-element name="instagram" />
    </mj-social>
   </mj-column>
  </mj-section>
 </mj-body>
</mjml>

運行我們的應用程序

現(xiàn)在我們已經完成了電子郵件的構建，我們可以繼續(xù)對其進行編譯以查看其外觀。為此，我們在終端中鍵入以下內容：

mjml -r email.mjml -o .

-r：允許MJML讀取和編譯我們的 mjml 文件
-o .：告訴MJML將編譯后的 mjml 輸出保存到同一目錄中

MJML完成編譯后，你現(xiàn)在應該在同一目錄中看到一個 email.html 文件。使用你喜歡的電子郵件客戶端或瀏覽器打開它，它的外觀應類似于下圖：

總結

正如我們剛才看到的，MJML幫助我們生成跨多個瀏覽器和客戶機響應的高質量、漂亮的HTML電子郵件。

到此這篇關于使用Vue.js和MJML創(chuàng)建響應式電子郵件的文章就介紹到這了,更多相關Vue.js和MJML創(chuàng)建響應式電子郵件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue3 (五)集成HTTP庫axios詳情
這篇文章主要講解Vue3 集成HTTP庫axios的相關內容，本文講圍繞如何利用Vue3 集成HTTP庫axios的相關資料展開文章,需要的朋友可以參考一下，希望對你有所幫助
2021-10-10
uniapp中如何基于vue3實現(xiàn)輸入驗證碼功能
本文介紹了如何使用uniapp和vue3創(chuàng)建一個手機驗證碼輸入框組件,通過封裝VerificationCodeInput.vue組件,并在父組件中引入,可以實現(xiàn)驗證碼輸入功能,適合需要增加手機驗證碼驗證功能的開發(fā)者參考使用
2024-09-09
vue.config.js中配置分包策略及常見的配置選項
在Vue.js中分包（Code Splitting）是一種將應用程序代碼拆分為不同的塊或包的技術,從而在需要時按需加載這些包,下面這篇文章主要給大家介紹了關于vue.config.js中配置分包策略及常見的配置選項的相關資料,需要的朋友可以參考下
2024-02-02
VUE中對object.object和object[object]的使用解讀
這篇文章主要介紹了VUE中對object.object和object[object]的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue中的組件及路由使用實例代碼詳解
組件系統(tǒng)是 Vue 的一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用。這篇文章主要介紹了Vue中的組件及路由使用 ,需要的朋友可以參考下
2019-05-05
vue使用Print.js打印頁面樣式不出現(xiàn)的解決
這篇文章主要介紹了vue使用Print.js打印頁面樣式不出現(xiàn)的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue3中簡單使用Mock.js方法實例分析
這篇文章主要介紹了Vue3中簡單使用Mock.js方法,mock.js在模擬后端接口數據響應與協(xié)調統(tǒng)一前后端開發(fā)接口規(guī)范方面有著重要的應用,需要的朋友可以參考下
2023-04-04
vue+Minio實現(xiàn)多文件進度上傳的詳細步驟
這篇文章主要給大家介紹了關于如何利用vue+Minio實現(xiàn)多文件進度上傳的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2022-03-03
基于Vue實現(xiàn)一個"蛇形"步驟條
在現(xiàn)代Web應用中,步驟條作為一種常見的UI組件,廣泛應用于表單提交、任務進度以及多步驟操作等場景,下面我們來看看如何利用Vue實現(xiàn)一個蛇形步驟條吧
2024-11-11
Vue Cli項目重構為Vite的方法步驟
本文主要介紹了Vue Cli項目重構為Vite的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-04-04