系列文章
Android程序员初探Vue（一）：环境搭建（Vue2.0）
Android程序员初探Vue（二）：项目结构
Android程序员初探Vue（三）：从开源项目看Vue架构
前言
微信小程序最开始出来时火了一把，但是几个月后又消停了，但是到了2017年快结束的时候，小程序开放了游戏，“跳一跳”横空出世，结果全民跳一跳。
当时我正在开发的项目中 Android 和 H5 是同步开发，以前一直以为 H5 只能做简单的操作，但是体验公司的 H5 网上订货商城，除了有时慢点以外，基本没什么区别。每次跟产品撕逼，产品经理就说：“App 没几个人用订货系统，都用微信扫描二维码下单。。。”
以前移动端浏览器就用来搜下东西，但是 4G 出来后，我们日常用小程序或者 H5 的次数都越来越多。如果 5G 出来后，那个网速比 4G 快了多少倍，再加上现在外面 Android 市场越来越不好，个人推测：由于客户端成本太高了，加上网速越来越快，手机性能越来越好，客户端估计只有大一点的公司才有，小公司估计都会用 H5。
现在公司好几个项目就只有 H5 端，Android 和 IOS 都没有了。
2018，作为 Android 程序员，如果不想走 Android 底层方向，是时候学习 H5 。
为什么选择学习 Vue
前端框架很多，鱼龙混杂，不像 Android 有 Google 爸爸统一控制，也不像 IOS 有苹果爹严格控制。
不过现在前端主要有三大框架：Angular（Google）、React（Facebook）、Vue（华人开发的）。
前端三大框架中 Vue 是最简单的，不信？你去问前端的同事：
“你知道 Vue 么”？
“知道啊，怎么了？”
“容易学么？”
“简单的很，一天就会了”
。。。。。。
PS: Vue 其实是一个 MVVM 框架，Android 使用 Google MVVM 的朋友应该很了解 MVVM。
学习条件
作为一个只会 Android 开发人员：
不会 Html
不会 Css
更不会 JavaScript
Node,js 是什么鬼
o(╯□╰)o
不过没关系，我们只是做 Android 时顺便写点前端而已，又不是专业的，哈哈。
对于 html 和 css，看单词就知道猜到大约什么意思了，遇到什么不懂的去网上查一查，看见的次数多了也就知道了。
js 感觉就是 java ++----，用了这么久的 java 再去看 js 语法更是特别容易，不过还是要花个一天是时间去了解了解才行，毕竟语法还是有很多不同的，这里推荐廖雪峰，一天时间就差不多了。
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
开发环境
开发 Android 我们需要一个 Android Studio 和 Java 和 SDK。同理学习 Vue 也一样。
Android Studio ----> Sublime Text
JDK&SDK ---> node.js
PS：Node.js是一个服务端的JavaScript运行环境，通过Node.js可以实现用JavaScript写独立程序。
安装
在命令行输入 node -v，如果出现了版本号，说明已经安装好了：
还以为我们以前 Android 开发时，下载或者更新 SDK 如果不用代理，有可能一天都更新不完， Vue 也一样。
1. 设置代理
npm install -g cnpm --registry=https://registry.npm.taobao.org
具体见： 淘宝镜像
PS：NPM是一个node.js的包管理器，如果想在项目中引入一个包：
npm install xxx包名称
类似于 Android 的compile 'com.squareup.okhttp3:okhttp:3.9.1'
2. 全局安装 vue-cli
npm install --global vue-cli
3. 新建工程
步骤1 和步骤2 都只需要安装一次，就跟搭建 Android 开发环境一样。
步骤3 每次创建工程都要使用，就跟Android Studio 每次新建项目一样，只是 Vue 用的是命令行操作：
vue init webpack my-project
出来这页面后会停顿在这，一直按回车键即可。
然后进度条开始走，等它走完就行了。
Webpack是一个前端打包和构建工具，相当于 Gradle 。
4.运行项目
执行步骤3 的命令后，会在执行的目录下生成 my-project 文件夹，然后在命令行中 cd 到该文件夹下面，执行
cd my-project
cnpm install
npm run dev
然后在浏览器中输入，就可以看见网页了。
npm run dev：dev 指的是开发调试模式。
如果是线上环境：
npm run build
Sublime 语法高亮
其它插件
- Emmet ： JS代码提示，自动补全
- JsFormat ： JS格式化
- Alignment： 等号对齐（Ctrl+Alt+A）
- CSScomb： CSS属性排序
End
是不是发现 So Easy，还记得我们以前搭建 Android 开发环境时，到网上搜半天配置 JavaHome，一个通宵下载 SDK，折腾好几天才能跑起一个 Hello World。
所以说 Vue 真的用起来挺爽的。
下一篇文章分析下 Vue 工程的结构。
传送门：
附上官网：
vue官方文档
