Android程序员初探Vue(一):环境搭建(Vue2.0)

系列文章
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,看单词就知道猜到大约什么意思了,遇到什么不懂的去网上查一查,看见的次数多了也就知道了。

http://www.w3school.com.cn/

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,如果出现了版本号,说明已经安装好了:

image.png

还以为我们以前 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

image.png

出来这页面后会停顿在这,一直按回车键即可。


image.png

然后进度条开始走,等它走完就行了。

Webpack是一个前端打包和构建工具,相当于 Gradle 。

4.运行项目

执行步骤3 的命令后,会在执行的目录下生成 my-project 文件夹,然后在命令行中 cd 到该文件夹下面,执行

cd my-project
cnpm install
npm run dev

成功

然后在浏览器中输入,就可以看见网页了。

http://localhost:8080

image.png

npm run dev:dev 指的是开发调试模式。
如果是线上环境:
npm run build

Sublime 语法高亮

sublime vue 语法高亮插件安装

其它插件
  • Emmet : JS代码提示,自动补全
  • JsFormat : JS格式化
  • Alignment: 等号对齐(Ctrl+Alt+A)
  • CSScomb: CSS属性排序

End

是不是发现 So Easy,还记得我们以前搭建 Android 开发环境时,到网上搜半天配置 JavaHome,一个通宵下载 SDK,折腾好几天才能跑起一个 Hello World。
所以说 Vue 真的用起来挺爽的。
下一篇文章分析下 Vue 工程的结构。
传送门:

给Android程序员的Vue指南二:项目结构


附上官网:
vue官方文档