前端框架Vue(16)——vue-i18n ,vue项目中如何实现国际化

一、前言

  趁着10月的最后一天,来写一篇关于前端国际化的实践型博客。国际化应该都不陌生,就是一个网站、应用可以实现语言的切换。

  在这就不谈原理,只说说如何实现中英文的切换。做技术的总得先把 demo 做出来嘛。

二、demo 场景需求分析

这里写图片描述

需求很简单,左上角 ‘’网易云音乐‘’就是一个中英文切换的按钮,点击弹出提示框,确认切换语言后,实现英文版本。

这里写图片描述

切换成英文版本:

这里写图片描述

三、实现国际化

  首先,我开发是以 vue 为技术栈,所以如题用的国际化插件是 vue-i18n,附上 github 传送门

1、我们得先有开发环境,先有项目跑起来,我推荐如果是喜欢用 vue 的小伙伴,可以尝试 vue-cli 官方脚手架。这边有我整理的一个脚手架 demo ,有助于你快速的进行 vue 模块化开发。

2、我们需要安装 vue-i18n, 推荐 npm 包依赖:

$ npm install vue-i18n

当然你也可以这样:

<script src=
评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值