Mac上面Vue開發(fā)環(huán)境搭建：
(里面是先安裝nodejs，再安裝Vue)
https://www.cnblogs.com/richerdyoung/p/7199917.html
簡(jiǎn)介
漸進(jìn)式JavaScript 框架。
特點(diǎn)：易用，靈活，高效。
是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue采用自底向上增量開發(fā)的設(shè)計(jì)。Vue的核心庫只關(guān)注試圖層，它不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方便，當(dāng)與單文件組件和Vue生態(tài)心痛支持的庫結(jié)合使用時(shí)，Vue也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用程序提供驅(qū)動(dòng)。
Vue就是Vue.js。
Vue.js 不支持 IE8 及其以下 IE 版本。
官方指南假設(shè)你已有 HTML、CSS 和 JavaScript 中級(jí)前端知識(shí)。
發(fā)起人：尤雨奚。
vue.js之初定位并不是想成為框架，通過發(fā)展，現(xiàn)在已經(jīng)成為一個(gè)框架了。
是一個(gè)輕量級(jí)的MVVM前端框架。內(nèi)容很小，gzip只有20+KB目前。
數(shù)據(jù)驅(qū)動(dòng)+組件化的前端開發(fā)，數(shù)據(jù)驅(qū)動(dòng)和組件化是vue的核心思想。
Github超過25k的star數(shù)，社區(qū)完善（Github,論壇,聊天室,Twitter）。
vue.js VS Angular.js VS react
vue.js，更輕量，gzip后只有26k，Angular（56k），react(44k)
vue.js 更容易上手，學(xué)習(xí)曲線平穩(wěn)。Angular難學(xué)，顛覆了學(xué)習(xí)前端的思想，因?yàn)橹跏怯蓪慾ava的人寫的。這點(diǎn)react與Angular比起來稍微好一些，有一套js 語法，但是這些的學(xué)習(xí)也是一個(gè)挑戰(zhàn)，而且react學(xué)習(xí)也會(huì)復(fù)制一些react全家桶，也是比較難學(xué)的。vue是最好學(xué)習(xí)的。
vue吸取了兩者之長(zhǎng)，借鑒了angular的指令和react的組件化。vue還有很多自己的特點(diǎn)，是這兩家沒有的。
vue.js的核心思想
數(shù)據(jù)驅(qū)動(dòng) + 組件化
ViewModel中有：DOM Listeners（監(jiān)聽） 和 Directives（指令）
View 對(duì)應(yīng)的 DOM對(duì)象。
ViewModel是一個(gè)很好的設(shè)計(jì)，如果沒有ViewModel，那么我們?cè)赩iew和Model之間的驅(qū)動(dòng)是由手動(dòng)觸發(fā)DOM改變，是一個(gè)很繁瑣的過程，而且容易出錯(cuò)，如果我們使用了ViewModel之后，就省略了手動(dòng)操作的步驟了，在vue.js里面，我們我們只需要改變數(shù)據(jù)，vue.js只需通過Directives指令去對(duì)DOM做一層封裝，當(dāng)數(shù)據(jù)發(fā)生變化，就會(huì)通知指令去修改DOM,數(shù)據(jù)是DOM的一種自然映射。vuejs還會(huì)對(duì)操作左一層監(jiān)聽，當(dāng)我們修改視圖的時(shí)候，view.js會(huì)監(jiān)聽這些變化，從而改變Model。從而實(shí)現(xiàn)了雙向綁定。
vue.js是如何做到這一點(diǎn)？
數(shù)據(jù)響應(yīng)原理：
數(shù)據(jù)（model）改變驅(qū)動(dòng)視圖（view）自動(dòng)更新。
組件化：
目的：擴(kuò)展HTML元素，封裝可重用代碼。
左邊是我們的頁面，被拆分為很多小的區(qū)塊，每個(gè)區(qū)塊就對(duì)應(yīng)一個(gè)組件，組件可以嵌套，最終組合形成一個(gè)完整的頁面。在vue.js中，每個(gè)組件都對(duì)應(yīng)一個(gè)ViewModel（右邊的小塊）。最終我們生產(chǎn)了右邊的ViewModel的這個(gè)數(shù)狀結(jié)構(gòu)，與我們左邊的DOM樹就是一一對(duì)應(yīng)的關(guān)系。
組件的設(shè)計(jì)原則：
頁面上每個(gè)獨(dú)立的可視/可交互區(qū)域都被視為一個(gè)組件。
比如我們的頁面的頭部，尾部，以及一些可復(fù)用的區(qū)塊，都可以抽象成組件。
每個(gè)組件對(duì)應(yīng)一個(gè)工程目錄，組件所需要的各個(gè)組件在這個(gè)目錄下就近維護(hù)。這個(gè)就提現(xiàn)了前端的工程化思想，為前端開發(fā)提供了很好的分支策略，每個(gè)開發(fā)者都清楚地知道自己所開發(fā)維護(hù)的功能單元，代碼必然存在于自己的組件目錄中，在這個(gè)目錄中就可以清楚知道自己的功能的內(nèi)部邏輯以及資源，樣式也好，js也好，頁面結(jié)構(gòu)也好，都在里面。在vue.js中，可以通過.vue文件把組件依賴的模板，js，和樣式都寫在一個(gè)文件中，這個(gè)就把就近維護(hù)思想發(fā)揮到極致。
頁面不過是組件的容器，組件可以嵌套自由組合形成完整的頁面。
** vue.js 的安裝**
方式：
1）獨(dú)立版本（就是在Vue.js的官網(wǎng)上直接下載vue.min.js，并且用<script>標(biāo)簽引入，相當(dāng)于引入靜態(tài)的jQuery）
2）使用CDN方法
以下推薦國外比較穩(wěn)定的兩個(gè) CDN，國內(nèi)還沒發(fā)現(xiàn)哪一家比較好，目前還是建議下載到本地。
BootCDN（國內(nèi)） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 會(huì)保持和 npm 發(fā)布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
3）NPM方法
由于npm安裝速度慢，所以使用淘寶的鏡像及其命令 cnpm（淘寶的鏡像的命令是cnpm）。
在用 Vue.js 構(gòu)建大型應(yīng)用時(shí)推薦使用 NPM 安裝：
$ cnpm install vue
vue.js 的命令行工具
Vue.js提供了一個(gè)官方命令行工具，可以用于快速搭建大型單頁面應(yīng)用。
# 安裝全局 vue-cli
$ cnpm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack模板的新項(xiàng)目(什么是webpack，請(qǐng)查看我的webpack介紹)
$ vue init webpack my-project
#這里需要進(jìn)行一些配置，默認(rèn)回車即可
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
進(jìn)入項(xiàng)目，安裝并運(yùn)行：
$ cd my-project
$ cnpm install # 解釋： npm install 命令用來安裝模塊到node_modules目錄。
$ cnpm run dev
DONE Compiled successfully in 4388ms
> Listening at http://localhost:8080
目錄文件結(jié)構(gòu)
.idea/ # 是webstorm打開過自動(dòng)生成的
build文件夾 # 最終發(fā)布的代碼存放位置
config文件夾 # 配置目錄，包括端口號(hào)等。我們初學(xué)者可以使用默認(rèn)的
node_modules文件夾 # npm加載的項(xiàng)目依賴模塊
src文件夾 # 這里是我們要開發(fā)的目錄，基本上要做的事情都放在這個(gè)目錄里面，里面包含了幾個(gè)目錄和文件。
【assets】: 放置一些圖片，如logo等。
【components】: 目錄里面放了一個(gè)組件文件，可以不用。
【App.vue】：項(xiàng)目入口文件，我們也可以直接將組件寫這里，而不使用 components 目錄。
【main.js】: 項(xiàng)目的核心文件。
static文件夾 # 靜態(tài)資源目錄，如圖片、字體等。
test文件夾 # 初始測(cè)試目錄，可刪除
# 這些.xxx文件都是一些配置文件，包括語法配置，git配置等。
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.postcssrc.js
.project
index.html # 首頁入口文件，你可以添加一些meta信息或者統(tǒng)計(jì)代碼什么的。
package.json # 項(xiàng)目配置文件
README.md # 項(xiàng)目的說明文檔， markdown格式
vue中的注釋
https://www.cnblogs.com/cag2050/p/7387934.html
1.在一個(gè)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運(yùn)行起來之后
我們?cè)跒g覽器中看到：
這里有一個(gè)#，這個(gè)是代表路由，#后面可以跳轉(zhuǎn)到不同的模塊。
http://localhost:8080/#/
