vue在线翻译练习

发表于 | 分类于 | 阅读次数：

刚开始接触Vue，想通过一些实例对其使用更加熟悉。

一、搭建过程与环境

网上已经有很多教程可以参考，这里简单说一下流程。

  1. 安装node.js，官网下载，直接下载node.js最新版本，避免版本过低影响使用
  2. 安装vue-cli
1
$npm install vue-cli -g

以上每一步步骤完成之后，使用

1
$xxx -v

验证是否安装成功，但vue -V这里V需要大写。

如下图，出现相应的版本号，则说明安装成功。

image

vue-cli脚手架的优势：

  • 有一套成熟的vue项目架构设计,能够快速初始化一个Vue项目。
  • vue-cli是官方支持的一个脚手架，会随本版本进行迭代更新。
  • vue-cli提供了一套本地的node测试服务器，使用vue-cli自己提供的命令，就可以启动服务器。
  • 有一套vue结构配置，它可以帮助我们写好vue.js代码快速构建项目的工具。
  • 集成打包上线方案。

二、创建项目

官方文档参考：https://vuejs-templates.github.io/webpack/

1.创建一个基于webpack模板的新项目

1
$vue init webpack my-project

my-project是项目的名称，由于目前还用不上太多别的功能，全都选择no。

2.进入目录

1
$cd my-project

3.安装项目依赖

1
$npm install

4.启动

1
$npm run dev

到这里已经成功创建了一个vue项目。

5.初始项目目录及说明：

https://blog.csdn.net/Solo95/article/details/72355098

6.打开浏览器，将看到右边的大logo：

三、实现过程

包含三个组件：根组件App.vue展现内容、 输入表单部分组件Form.vue和输出展示部分组件Output.vue。

首先在components目录下创建两个组件：Form.vue和Output.vue

1. Form.vue表单部分

1）

  • 主要结构

2）

  • 给input绑定值==v-model=”textTodo”== ，并在data中声明
  • 实现点击button，监听事件 ==v-on:click=”formSubmit()”== 拿到输入的值
  • 采用事件注册的方法==this.$emit()==，默认一个参数，第一个参数formSubmit2为方法
  • $emit自定义事件Vue自定义事件是为组件间通信设计，自定义事件提供 ==$on、$off、$once、$emit== 几个api

2. App.vue

1）

  • 根组件调用两个子组件的地方，是两者的联系点，所以在调用Form组件的地方监听this.$emit()中的方法
  • 根组件中需要用一个方法接收传过去的待翻译的内容，所以在Form组件的this.$emit()中加上参数textTodo，返回根组件transText方法添加形参text

2）

  • 使用 https://tech.yandex.com/ 的翻译Tranlsate API

  • 这里需要一个API Key，必须通过key请求翻译的一些文本内容

  • 创建属于自己的API keys

  • 在document里可以看到有很多语言，需要什么语言就将其code写入表单select的option的value值中去。

3）

  • 在使用http请求对应的接口前必须先安装Vue resource网络请求模块
1
$npm install vue-resoure --save
  • 在main.js中引入这个模块，用Vue.use使用中间件引入，接着就可以使用http了，在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数
1
2
3
4
5
6
// Lambda写法
this.$http.get('/someUrl', [options]).then((response) => {
    // 响应成功回调
}, (response) => {
    // 响应错误回调
});

4）

  • 之前给Form的方法transText()参数有languange和text

==[解决选中语言的问题]==

select上绑定一个==v-model=”language”== 在data中初始化，与之前传text同理，给formSubmit方法加一个参数language就好了，http.get中将lang的值修改为language

  • 请求完的返回值response通过箭头函数then返回，打印response，查看在body中有个text数组，我们需要的已翻译好的文本为数组中第0个值，因此使用==response.body.text[0]==

  • 接着将这个值赋值给transedText，而这个值应该传到Output.vue中去显示
    绑定属性==v-text=”transedText”==

3.Output.vue

  • 很简单，只需定义一个属性props，用于传值transedText，并显示出来。
  • 在vue中，组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

四、样式

https://github.com/iview/iview

iview与使用vue-resource差不多

五、打包

vue-cli可以直接用以下命令快速打包

1
$npm run build

第一次打包好后打开是一片空白

此处需要注意将文件index.js中的==assetsPublicPath==值改为相对路径（==/–>./==），否则打包好后请求不到资源显示空白，因为vue是使用的绝对路径。

改了以后整体页面显示，但静态文件还是没有

这两个404的文件所在路径能被正确访问应该是

1
2
/static/fonts/ionicons.05acfdb.woff
/static/fonts/ionicons.24712f6.ttf

但是前面对了两级目录/static/css所以找不到

参考https://juejin.im/post/5a75c8ce5188257a624c9ff1 顺利解决！

之后只需要将dist文件夹中的内容放到服务器上就可以访问了！

六、收获与不足

收获：

熟悉基础语法、核心功能、基础概念、使用iView安装依赖的模块、调用API的方法和构建项目到打包的过程。

不足：

布局简单，功能单一。