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