vue实战之在线翻译项目

最新推荐文章于 2024-08-07 15:23:56 发布

左手写爱等等

最新推荐文章于 2024-08-07 15:23:56 发布

阅读量2k

点赞数 4

文章标签： vue实战 nodejs 在线翻译 Vue

本文链接：https://blog.csdn.net/qq_35788269/article/details/80655985

版权

本文介绍了一个基于Vue的在线翻译项目，通过组件化实现翻译功能。用户可以在左侧选择源语言，右侧选择目标语言，点击翻译即可获取结果。项目涉及Vue的基础语法和组件通信，包括翻译表格组件和翻译结果显示组件。开发者需要预先安装Node.js环境和Vue脚手架，通过Vue CLI创建项目。项目使用API获取翻译数据，APIkey可通过注册获取。

摘要由CSDN通过智能技术生成

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.org/en/

第二部分：脚手架的安装：这个我们需要去一下Github！
网址：https://github.com/vuejs/vue-cli
根据需要选择不同的包：

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