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的核心思想
數據驅動 + 組件化
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）自動更新。
組件化：
目的：擴展HTML元素，封裝可重用代碼。
左邊是我們的頁面，被拆分為很多小的區塊，每個區塊就對應一個組件，組件可以嵌套，最終組合形成一個完整的頁面。在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
目錄文件結構
.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/#/
