vue2实战：在线翻译

最新推荐文章于 2025-11-17 13:36:33 发布

原创

最新推荐文章于 2025-11-17 13:36:33 发布 · 758 阅读

0 ·

CC 4.0 BY-SA版权

这篇博客介绍了一个使用Vue2实现的在线翻译项目。通过vue-cli搭建项目环境，详细步骤包括配置环境、创建文件结构。项目功能是输入翻译内容，选择目标语言，点击翻译按钮获取结果显示。适合Vue初学者进行实践，学习项目配置、Vue基本用法和子组件间的数据传递。

源码参考:https://blog.youkuaiyun.com/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                  //页面入口文件
       |---