Vue学习总结之HelloWorld

简单介绍一下自己，我是一名Android 开发工程师，15年来到现在的公司，负责研发部移动互联网的产品开发。公司是一家专业从事车载无线数传、视频采集和卫星定位智能监控产品的研发、生产、营销和运营为一体的国家高新技术企业。公司的app主要是使用原生开发，而我便同时兼任两个平台的开发----Android、IOS。 为了提高开发效率，减少时间及维护成本，公司决定使用当前主流的前端技术框架，而我为了进一步提高自己，顺应公司的发展和改变，开始了学习Vue 之路。

Vue 简单介绍：

什么是Vue?

Vue工作环境的搭建

开始第一个Vue 程序： HelloWorld

参考网址

1.什么是Vue ?

答： 官方解释为“Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。”

个人理解，Vue 其实就是一个技术框架，与 另一个主流的框架Angular 类似。那两者有何区别呢？

Vue ---- 上手简单、易学习，文档说明丰富； 指令是以v-xxx 开始，由HTML+JSON+new Vue() 对象组成； 属于个人维护(咱中国人写的)；适合用于移动项目。

Angular --- 上手较难、框架大；指令以ng-xxx 开始，方法及属性都放在$scope 里；由Google维护，适合PC端。

共同点：不兼容低版本的IE 浏览器。

2. Vue工作环境的搭建

参考：https://cn.vuejs.org/v2/guide/installation.html

1. 可以直接下载Vue.js 文件，使用时直接copy 到项目中。

2. 使用Vue CDN 在线链接,百度一下就知道。

3. 使用NPM 命令。

注：使用之前必须安装node.js，node.js 的安装请到这里：http://nodejs.cn/download/

总结常用NPM 命令：

# 最新稳定版$ npm install vue

# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖，走你$cdmy-project$ npm install$ npm run dev

3. 开始第一个Vue 程序： HelloWorld

首先打开nodepad++ 记事本。写如下代码

这样子，第一个Vue的程序就运行起来了，如下图：

4. 参考学习网址

（1）https://cn.vuejs.org/v2/guide/

(2) http://www.runoob.com/vue2/vue-tutorial.html

本文章仅限于对自己学习技术的总结，方便自己能力的提高，写得不好的地方请多谅解。