admin 管理员组

文章数量: 1184232

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

本文标签： 实战 在线翻译

版权声明：本文标题：vue2实战：在线翻译 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1754786103a3038302.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。