原始碼參考: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                  //頁面入口檔案
       |---main.js                  //程式入口檔案，載入各種公共元件
 

  |----static                       //第三方靜態資源，比如圖片，json資料等
  |----.babelrc                     //es6語法編譯配置
  |----.editorconfig                //定義程式碼格式
  |----.gitignore                   //git上傳時需要忽略的檔案
  |----.postcssrc.js
  |----index.html                   //入口頁面
  |----package.json                 //專案基本資訊
  |----package-lock.json            //確定當前安裝的包的依賴，以便後續重新安裝的時候生成相同的依賴，而忽略專案開發過程中有些依賴已經發生的更新
  |----README.md

如terminal提示所示，在terminal中輸入cd online-translation，再npm run dev

成功啟動伺服器，瀏覽器訪問localhost:8080就可以看到預設顯示的頁面了。
至此，環境就配置好了。接下來，就可以愉快的擼程式碼了。

實現線上翻譯

構建如下所示檔案樹：

|--src
   |--components
      |--translateForm.vue
      |--translateOutput.vue
   |--router
      |--index.js
   |--App.vue
   |--main.js        

index.html中的內容無需更改

main.js的內容

import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'

Vue.use(VueResource);

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

translateForm.vue的內容

<template>
<div id="translateForm">
    <form id="transform" v-on:submit="formSubmit">
        <input type="text" v-model="textToTranslate" placeholder="需要翻譯的內容">
        <select v-model="language">
            <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>
        </select>
        <input class="btn btn-primary" type="submit" value="翻譯">
    </form>
</div>
</template>

<script>
export default {
    name: 'translateForm',
    data:function(){
        return{
            textToTranslate:"",
            language:""
        }
    },
    methods:{
        formSubmit:function(e){
        this.$emit("formSubmit",this.textToTranslate,this.language);
        e.preventDefault();
        }
    }
}
</script>

translateOutput.vue的內容

<template>
    <div id="translateOutput">
        <h2>{{translatedText}}</h2>
    </div>
</template>

<script>
export default {
    name: 'translateOutput',
    props:["translatedText"]
}
</script>

App.vue的內容

<template>
<div id="app">
    <h1>線上翻譯</h1>
    <h5 class="text-muted">簡單 / 易用 / 便捷</h5>
    <translateForm v-on:formSubmit="translateText"></translateForm>
    <translateOutput v-text="translatedText"></translateOutput>
</div>
</template>

<script>
import TranslateForm from '@/components/translateForm'
import TranslateOutput from '@/components/translateOutput'

export default {
    name: 'App',
    data:function(){
        return{translatedText:""}
    },
    components: {
        TranslateForm,TranslateOutput
    },
    methods:{
        translateText:function(text,language){
            this.$http.get(
        'https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180611T041751Z.761a657e2b451443.1c8c07e511b6d3bf8a5744cf21be71903bb64489&lang='+language+'&text='+text)
            .then((response) => {
            this.translatedText = response.body.text[0];
            })
        }
    }
}
</script>

<style>
#app{
text-align: center;
}
</style>

欲一起學習，討論請發郵件至[email protected]