一起学习一下vuejs的helloword

写在前面

作为一名写Ruby on Rails出身，后来又转入Go开发的后端程序猿，接触前后端分离以后的前端的难度可想而知。

什么是前后端分离？前后端分离以后的前端是什么？Vue是什么？怎么使用Vue开发？使用Vue开发真的会提升效率吗……我带着一系列的问题开始我的征程了。看看我能走到哪里吧。（为什么选择了Vue框架来学习，主要因为公司的前端同事对vue进行了培训……）

开发环境

适应人群

这里假设读者已经了解前端的一些知识，知道js、css、html。如果读者还不了解Node、Npm等，请和我一起百度吧=。=

安装与初始化

安装

Vue官方教程 里不推荐马上从vue-cli开始学习，但是我等不及了，所以立马安装了vue的脚手架vue-cli。

npm install -g @vue/cli

# 安装完成以后查看版本号
npm --version
# 3.0.0-rc.3

初始化项目

使用脚手架初始化项目，这里使用了vue init命令。

# 初始化一个helloword项目
# 这里使用了webpack模板，然而webpack是什么鬼？
vue init webpack helloword
# 运行了上面的命令以后，一路 回车+Y 及可

启动项目

# 切换到项目目录
cd helloword
# 启动项目
npm run dev

# 启动项目后，等待几秒钟后，就会显示如下的示例描述，点击链接即可在浏览器访问服务了。
# Your application is running here: http://localhost:8081

Element组件库及示例代码

之前前端的同学讲，使用vuejs做开发，可以使用现成的组件库，就好像搭积木一样，并推荐了Element这个组件库。

花了大概一天的时间，根据论坛的样式做了一个demo，源码放在了ws-client，感兴趣的同学可以去git clone下来跑一跑。

写一写感悟

坐在我旁边的小黄同学，后端开发技能可谓精湛；而每次和他聊起前端，他都嫌弃说前端太麻烦，声称再也不写前端。我心里不服气，顺着前端同时培训的思路搞了一天的layout，发现前端比起后端确实要繁琐很多。

TODO

目前ws-client只包含了基本的样式，里面的数据逻辑尚未编写。如果真的要走完vue的学习之路，至少还要完成下面几个事项：

小结

文本一时兴起，客串了一下前端开发，简单介绍了vuejs学习起步的几个步骤，并给出了一个初级的demo。隔行如隔山，目前尚未彻底领悟到前端开发的要点，希望自己能继续下去，陆续完成上面列举的三个事项。

需要特别强调一下，因为自己的精力大部分还是后端的开发，因此这个系列文章不会牵涉很细节的内容（隔行如隔山，有些细节实在想不到）。

参考