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 的安装**
方式：
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/#/