我的编程空间，编程开发者的网络收藏夹
学习永远不晚
位置：首页-资讯-前端开发

使用Vue.js和MJML创建响应式电子邮件

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号
获取短信验证
立即预约

请填写图片验证码后获取短信验证码

看不清楚，换张图片

免费获取短信验证码

使用Vue.js和MJML创建响应式电子邮件

MJML是一种现代的电子邮件工具，使开发人员可以在所有设备和邮件客户端上创建美观、响应迅速的出色电子邮件。这种标记语言是为了减少编写响应式电子邮件的痛苦而设计的。

它的语义语法使其易于使用。它还具有功能丰富的标准组件，可缩短开发时间。在本教程中，我们将使用MJML构建漂亮的响应式邮件，并在多个邮件客户端上进行测试。

开始MJML

你可以使用npm安装MJML，以将其与Node.js或CLI结合使用：


$ npm install -g mjml

构建我们的电子邮件

首先，请创建一个名为 email.mjml 的文件，尽管你也可以选择其他任何名称。创建文件后，我们的响应式电子邮件将分为以下几部分：

  • 公司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 定义了一个包含其他组件的节。

对于定义的每个部分，还定义了具有各自十六进制值的 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 设置按钮的位置。为了让背景在列中呈现全宽，将列宽设置为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 组件实现的。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"
       class="lazy" data-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" class="lazy" data-src="https://191n.mj.am/img/191n/3s/x0l.png" />
 </mj-column>
 <mj-column>
  <mj-image width="100px" class="lazy" data-src="https://191n.mj.am/img/191n/3s/x01.png" />
 </mj-column>
 <mj-column>
  <mj-image width="100px" class="lazy" data-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。

全部放在一起

至此，我们已经实现了所有部分，完整的 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"
         class="lazy" data-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" class="lazy" data-src="https://191n.mj.am/img/191n/3s/x0l.png" />
   </mj-column>
   <mj-column>
    <mj-image width="100px" class="lazy" data-src="https://191n.mj.am/img/191n/3s/x01.png" />
   </mj-column>
   <mj-column>
    <mj-image width="100px" class="lazy" data-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>

运行我们的应用程序

现在我们已经完成了电子邮件的构建，我们可以继续对其进行编译以查看其外观。为此，我们在终端中键入以下内容：


mjml -r email.mjml -o .
  • -r：允许MJML读取和编译我们的 mjml 文件
  • -o .：告诉MJML将编译后的 mjml 输出保存到同一目录中

MJML完成编译后，你现在应该在同一目录中看到一个 email.html 文件。 使用你喜欢的电子邮件客户端或浏览器打开它，它的外观应类似于下图：

总结

正如我们刚才看到的，MJML帮助我们生成跨多个浏览器和客户机响应的高质量、漂亮的HTML电子邮件。

到此这篇关于使用Vue.js和MJML创建响应式电子邮件的文章就介绍到这了,更多相关Vue.js和MJML创建响应式电子邮件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉

使用Vue.js和MJML创建响应式电子邮件

下载Word文档到电脑，方便收藏和打印～

下载Word文档

相关文章

猜你喜欢

使用Vue.js和MJML创建响应式电子邮件

2024-04-02

如何使用Vue.js和MJML创建响应式电子邮件

2024-04-02

如何使用HTML和CSS创建一个响应式图片格子布局

如何使用HTML和CSS创建一个响应式图片格子布局在当前移动设备日益普及的时代，为了更好地展示图片内容和适应不同的屏幕尺寸，响应式设计变得越来越重要。在本文中，将介绍如何使用HTML和CSS创建一个响应式的图片格子布局，以展示图片并使其在不
2023-10-27

如何使用Java和NumPy创建高效的响应式应用程序？

2023-07-06

如何使用HTML和CSS创建一个响应式图库布局

引言:随着移动设备的普及，响应式设计成为了网页设计的重要考虑因素之一。而在开发一个图库网站时，如何设计一个兼具美观和响应式布局的页面，将成为重要的问题。本文将详细讨论如何使用HTML和CSS来创建一个响应式图库布局，并且提供具体的代码示例。
2023-10-21

如何使用HTML和CSS创建一个响应式表格布局

如何使用HTML和CSS创建一个响应式表格布局HTML是一种用于构建网页结构的标记语言，而CSS则用于设置网页的样式和布局。在网页设计中，表格是一种常见的元素，用于以表格形式展示数据。本文将介绍如何使用HTML和CSS来创建一个响应式的表格
2023-10-27

如何使用HTML和CSS创建一个响应式博客布局

在当今互联网时代，博客已经成为人们分享知识、经验和故事的重要平台。设计一个吸引人且具有响应式布局的博客，可以让你的内容更好地展示在不同尺寸和设备上，提升用户体验。本文将介绍如何使用HTML和CSS来创建一个响应式博客布局，同时提供具体的代码
2023-10-21

如何使用HTML、CSS和JS创建响应式可过滤的游戏

2024-04-02

如何使用HTML和CSS创建一个响应式卡片墙布局

如何使用HTML和CSS创建一个响应式卡片墙布局在现代网页设计中，响应式布局是一项非常重要的技术。通过使用HTML和CSS，我们可以创建一个响应式的卡片墙布局，以适应不同屏幕尺寸的设备。下面将详细介绍如何使用HTML和CSS创建一个简单的响
2023-10-25

如何使用HTML和CSS创建一个响应式时光轴布局

如何使用HTML和CSS创建一个响应式时光轴布局时光轴布局是一种独特的页面布局方式，能够将内容按照时间顺序展示，非常适合用于展示历史事件、个人履历或者项目进展等。本文将介绍如何使用HTML和CSS来创建一个响应式的时光轴布局，并提供具体的代
2023-10-26

如何使用HTML和CSS创建一个响应式图片墙布局

如何使用HTML和CSS创建一个响应式图片墙布局引言：随着移动互联网的普及，响应式设计成为了网页设计的重要标准。在网页设计中，图片墙布局是常见的一种布局形式，它可以以瀑布流的形式展示不同尺寸的图片。本文将介绍如何使用HTML和CSS创建一个
2023-10-25

如何使用HTML和CSS创建一个响应式轮播图布局

在现代的网页设计中，轮播图是一个常见的元素。它能够吸引用户的注意力，展示多个内容或图片，并且能够自动切换。在本文中，我们将介绍如何使用HTML和CSS创建一个响应式的轮播图布局。首先，我们需要创建一个基本的HTML结构，并添加所需的CSS样
2023-10-21

如何使用HTML和CSS创建一个响应式会员卡布局

如何使用HTML和CSS创建一个响应式会员卡布局在当今社会，会员卡已成为商家吸引客户、增加销售额的一种重要手段。然而，在设计会员卡布局时，我们经常会面临一个重要问题：如何在不同设备上（如电脑、手机、平板电脑）展示出完美的响应式效果？本文将教
2023-10-24

如何使用HTML和CSS创建一个响应式导航栏布局

导航栏是网站中非常重要的一部分，它可以帮助用户快速导航到想要的页面。在移动设备越来越普及的今天，响应式导航栏布局尤为重要，以适应不同屏幕尺寸的设备。本文将介绍如何使用HTML和CSS创建一个简单的响应式导航栏布局，并提供具体的代码示例。HT
2023-10-21

如何使用HTML和CSS创建一个响应式模态框布局

在现代网页设计中，模态框（Modal Box）是一个常见的元素，用于在网页上显示额外的内容，如提示、登录框、图片展示等。在本篇文章中，我们将学习如何使用HTML和CSS创建一个响应式的模态框布局，并提供具体的代码示例。首先，我们需要创建一个
2023-10-21

你知道如何使用Python numpy和django来创建响应式Web应用程序吗？

你知道如何使用Python numpy和django来创建响应式Web应用程序吗？
2023-11-01

如何使用HTML和CSS创建一个响应式视频展示布局

如何使用HTML和CSS创建一个响应式视频展示布局随着移动设备使用的普及，响应式设计已经成为现代网页设计中必不可少的一部分。在本文中，我们将学习如何使用HTML和CSS创建一个响应式视频展示布局。这个布局将适应不同大小的屏幕，并在任何设备上
2023-10-25

如何使用HTML和CSS创建一个响应式图片画廊布局

在现代的网页设计中，响应式设计已经成为一个非常重要的概念。随着移动设备的普及，人们对于在不同设备上浏览网页的需求也愈发增加。在本文中，我将详细介绍如何使用HTML和CSS创建一个响应式的图片画廊布局。首先，我们需要准备一些HTML结构来构建
2023-10-21

如何使用HTML和CSS创建一个响应式导航菜单布局

导航菜单是网站设计中非常重要的一个元素，它能够帮助用户快速浏览并导航到网站的不同部分。随着移动设备的普及，响应式设计也成为了必要的要素之一，因为在不同大小的屏幕上，导航菜单的布局和样式需要调整以适应不同设备。在本文中，我将向您展示如何使用H
2023-10-21

如何使用HTML和CSS创建一个响应式会员注册布局

随着移动设备的普及，网站的响应式设计越来越重要。为了满足不同设备屏幕尺寸的需求，我们需要创建一个能够自适应调整布局的会员注册页面。本文将介绍如何使用HTML和CSS创建一个响应式的会员注册布局，并提供具体的代码示例。创建HTML结构首先，我
2023-10-21

热门标签

Linux(148)PHP(127)Java(102)正则表达式(101)JavaScript(69)最佳实践(67)jQuery(44)MySQL(39)Docker(37)C语言(36)性能优化(34)Python(34)XML(28)string(27)第三方库(23)回调函数(23)ZIP(22)数组(22)可扩展性(22)字符串比较(21)find(20)RPM(20)Go(20)grep(19)ASP.NETCore(19)XML解析器(19)事件(19)事件处理程序(19)StringBuilder(18)Nginx(18)

编程热搜

查看更多

编程资源站

  • 资料下载
  • 历年试题
2021年下半年软考高级信息系统项目管理师高频考点精选资料
2021下半年软考高级信息系统技术知识点记忆口诀精选资料
2021下半年软考《信息系统项目管理师》考试真题及答案精选资料
2021下半年软考高级考试备考攻略精选资料
2021年软考高级《信息系统项目管理师》巩固练习题汇总精选资料
2021下半年软考高级信息系统项目管理师30个易考知识点汇总精选资料
2021下半年软考高级知识点这样记，还担心记不住吗精选资料
2021年下半年软考高级考试重点汇总精选资料
2021下半年软考高级信息系统项目管理师计算公式汇总精选资料
2021年下半年软考高级《信息系统项目管理师》模拟试题精选资料
查看更多
信息系统项目管理师选择题每日一练（2024）历年试题
2023年下半年信息系统项目管理师综合知识真题演练历年试题
查看更多

目录

本网页已闲置超过3分钟，按键盘任意键或点击空白处，即可回到网页
最新资讯更多
    友情链接编程网

    反馈

    我要
    反馈