vue2实战：在线翻译

源码参考:https://blog.csdn.net/qq_35788269/article/details/80655985
项目实现的功能就是左侧输入框输入需要翻译的内容，右侧输入框选择要转换的语言，点击翻译按钮就可以得到翻译的结果并显示在下方！
这个项目对于初学vue的小伙伴来说刚刚好，比较简单，能够练习配置项目环境，简单的使用vue，子组件如何向父组件传递数据等。

首先，列出这个项目用到的工具，插件及我的运行环境等

Windows+webstorm
node.js（本文假设你已安装）
vue-cli，vue-resource

第二步，配置环境

项目文件位置说明：本项目的文件路径为c:/myproject/online-translation

使用vue-cli自动构建项目环境

打开webstorm的terminal,输入npm install vue -g。

下载完成之后输入vue -V，如果输出版本号，表示安装成功

在terminal中进入目录c:/myproject输入vue init webpack online-translation就可以自动搭建项目环境了。

搭建好之后，项目目录如下：

  |----build                        //生产环境
  |----config                       //开发环境配置，如配置域名，端口号等
  |----node-modules                 //通过npm install安装依赖的代码库
  |----src                          //源码目录
       |---assets
       |---components               //vue公共组件
           |--HelloWorld.vue
       |---router                   //配置子路由
           |--index.js
       |---App.vue                  //页面入口文件
       |---<