Vue - 简介，安装，运行，以及目录结构
Mac上面Vue开发环境搭建：
(里面是先安装nodejs，再安装Vue)
https://www.cnblogs.com/richerdyoung/p/7199917.html
简介
渐进式JavaScript 框架。
特点：易用，灵活，高效。
是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注试图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方便，当与单文件组件和Vue生态心痛支持的库结合使用时，Vue也完全能够为复杂的单页应用程序提供驱动。
Vue就是Vue.js。
Vue.js 不支持 IE8 及其以下 IE 版本。
官方指南假设你已有 HTML、CSS 和 JavaScript 中级前端知识。
发起人：尤雨奚。
vue.js之初定位并不是想成为框架，通过发展，现在已经成为一个框架了。
是一个轻量级的MVVM前端框架。内容很小，gzip只有20+KB目前。
数据驱动+组件化的前端开发，数据驱动和组件化是vue的核心思想。
Github超过25k的star数，社区完善（Github,论坛,聊天室,Twitter）。
vue.js VS Angular.js VS react
vue.js，更轻量，gzip后只有26k，Angular（56k），react(44k)
vue.js 更容易上手，学习曲线平稳。Angular难学，颠覆了学习前端的思想，因为之初是由写java的人写的。这点react与Angular比起来稍微好一些，有一套js 语法，但是这些的学习也是一个挑战，而且react学习也会复制一些react全家桶，也是比较难学的。vue是最好学习的。
vue吸取了两者之长，借鉴了angular的指令和react的组件化。vue还有很多自己的特点，是这两家没有的。
vue.js的核心思想
数据驱动 + 组件化
数据驱动.png
ViewModel中有：DOM Listeners（监听） 和 Directives（指令）
View 对应的 DOM对象。
ViewModel是一个很好的设计，如果没有ViewModel，那么我们在View和Model之间的驱动是由手动触发DOM改变，是一个很繁琐的过程，而且容易出错，如果我们使用了ViewModel之后，就省略了手动操作的步骤了，在vue.js里面，我们我们只需要改变数据，vue.js只需通过Directives指令去对DOM做一层封装，当数据发生变化，就会通知指令去修改DOM,数据是DOM的一种自然映射。vuejs还会对操作左一层监听，当我们修改视图的时候，view.js会监听这些变化，从而改变Model。从而实现了双向绑定。
vue.js是如何做到这一点？
数据响应原理：
数据（model）改变驱动视图（view）自动更新。
图片.png
组件化：
目的：扩展HTML元素，封装可重用代码。
图片.png
左边是我们的页面，被拆分为很多小的区块，每个区块就对应一个组件，组件可以嵌套，最终组合形成一个完整的页面。在vue.js中，每个组件都对应一个ViewModel（右边的小块）。最终我们生产了右边的ViewModel的这个数状结构，与我们左边的DOM树就是一一对应的关系。
组件的设计原则：
页面上每个独立的可视/可交互区域都被视为一个组件。
比如我们的页面的头部，尾部，以及一些可复用的区块，都可以抽象成组件。
每个组件对应一个工程目录，组件所需要的各个组件在这个目录下就近维护。这个就提现了前端的工程化思想，为前端开发提供了很好的分支策略，每个开发者都清楚地知道自己所开发维护的功能单元，代码必然存在于自己的组件目录中，在这个目录中就可以清楚知道自己的功能的内部逻辑以及资源，样式也好，js也好，页面结构也好，都在里面。在vue.js中，可以通过.vue文件把组件依赖的模板，js，和样式都写在一个文件中，这个就把就近维护思想发挥到极致。
页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。
** vue.js 的安装**
方式：
1）独立版本（就是在Vue.js的官网上直接下载vue.min.js，并且用<script>标签引入，相当于引入静态的jQuery）
2）使用CDN方法
以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
3）NPM方法
由于npm安装速度慢，所以使用淘宝的镜像及其命令 cnpm（淘宝的镜像的命令是cnpm）。
在用 Vue.js 构建大型应用时推荐使用 NPM 安装：
$ cnpm install vue
vue.js 的命令行工具
Vue.js提供了一个官方命令行工具，可以用于快速搭建大型单页面应用。
# 安装全局 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack模板的新项目(什么是webpack，请查看我的webpack介绍)
$ vue init webpack my-project
#这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
进入项目，安装并运行：
$ cd my-project
$ cnpm install # 解释： npm install 命令用来安装模块到node_modules目录。
$ cnpm run dev
DONE Compiled successfully in 4388ms
> Listening at http://localhost:8080
目录文件结构
图片.png
.idea/ # 是webstorm打开过自动生成的
build文件夹 # 最终发布的代码存放位置
config文件夹 # 配置目录，包括端口号等。我们初学者可以使用默认的
node_modules文件夹 # npm加载的项目依赖模块
src文件夹 # 这里是我们要开发的目录，基本上要做的事情都放在这个目录里面，里面包含了几个目录和文件。
【assets】: 放置一些图片，如logo等。
【components】: 目录里面放了一个组件文件，可以不用。
【App.vue】：项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
【main.js】: 项目的核心文件。
static文件夹 # 静态资源目录，如图片、字体等。
test文件夹 # 初始测试目录，可删除
# 这些.xxx文件都是一些配置文件，包括语法配置，git配置等。
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.postcssrc.js
.project
index.html # 首页入口文件，你可以添加一些meta信息或者统计代码什么的。
package.json # 项目配置文件
README.md # 项目的说明文档， markdown格式
vue中的注释
https://www.cnblogs.com/cag2050/p/7387934.html
1.在一个vue的文件中根部注释使用： 在vue的模板中注释也使用。
<!-- 展示模板 -->
<template>
<!-- 模板里面注释 -->
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template>
2.在vue的文件的 js中注释使用和js注释一样：
// 单行注释
/*多行注释*/
<script>
// 单行注释
/* 多行注释
多行注释 */
</script>
3.在vue的style（css）中注释使用和css注释一样：
/*css的注释*/
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
/*
margin-left: 60px;
margin-right: 60px;
*/
}
</style>
Vue运行起来之后
我们在浏览器中看到：
这里有一个#，这个是代表路由，#后面可以跳转到不同的模块。
http://localhost:8080/#/
