admin管理员组

文章数量:1531705

vue实战之在线翻译项目

今天,博主带来的分享是vue实战之在线翻译项目,一个小小的vue项目,用到了vue的很多基础语法,传组件等等!我们先来看下效果把!


左侧输入一种语言,右侧选择要转换的语言,点击翻译就可以得到结果!是不是很神奇!当然博主这里仅仅罗列的七八种语言!我们就以汉语来展示了!

其他语言的展示:




可以输入与可以翻译的语言有:

< option value= "en" >英语 </ option > < option value= "ru" >俄语 </ option > < option value= "ko" >朝鲜语 </ option > < option value= "ja" >日语 </ option > < option value= "es" >西班牙语 </ option > < option value= "it" >意大利语 </ option > < option value= "de" >德语 </ option >

<option value="zh">中文</option>

博主比较懒,,就贴代码理解了!

好了,接下来我们正式开始把!先说下思路吧,一个是要翻译的表格制作(组件1),另一个是翻译的结果(组件2),

这是两个不同的子组件!

使用vue脚手架的话,,我们需要做点准备工作!

第一:安装node环境:直接去node官网下载就可以了,安装超级简单,直接点下一步,安装结束之后在C盘的program files下

会有一个nodejs文件夹的!node官网:https://nodejs/en/


第二部分:脚手架的安装:这个我们需要去一下Github!

网址:https://github/vuejs/vue-cli

根据需要选择不同的包:


点击进入之后选择webpack,并且安装

本文标签: 实战在线翻译项目vue