Vue是漸進(jìn)式框架，作者尤雨溪，現(xiàn)就職于阿里巴巴。
個(gè)人覺得和微信小程序有點(diǎn)相似，只不過微信小程序已經(jīng)搭建好環(huán)境了，而Vue需要自己搭建開發(fā)環(huán)境。
共同點(diǎn)為：（概括的不夠準(zhǔn)確，但是差不多這些個(gè)共同點(diǎn)）
1.數(shù)據(jù)綁定
2.有自己特殊的組件模板
3.和HTML+CSS + JS混合用

搭建環(huán)境前先了解Vue。
Vue.js基于Node.js，Vue項(xiàng)目中的.vue文件不能直接被瀏覽器解析，需要轉(zhuǎn)為.js文件。一般管理Node.js的工具為npm，網(wǎng)絡(luò)上有npm使用的教程。
安裝環(huán)境的步驟：
1.安裝node.js
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
檢測是否安裝成功：brew -v
如圖：

圖片.png

2.安裝npm
首先獲取node的安裝模塊的權(quán)限
sudo chmod -R 777 /usr/local/lib/node_modules/
然后安裝npm淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
檢測是否安裝npm成功：
npm -v
如圖：

圖片.png

3.安裝webpack(全局安裝)
npm install webpack -g 如果安裝卡住了，或者安裝不上，可以嘗試：cnpm install webpack -g

4.安裝vue手腳架（全局安裝，比如vue模板等）
npm install vue-cli -g

到此為止，Vue項(xiàng)目的前期環(huán)境就算是配好了。接下來就是創(chuàng)建Vue項(xiàng)目了。
5.創(chuàng)建Vue工程
首先，cd到工程目錄下面
操作步驟為，在本地創(chuàng)建一個(gè)空文件夾，用來存放Vue項(xiàng)目，比如mydemo這個(gè)文件夾,例如：
cd /Users/luoxiaoyou/Desktop/MyDemo
然后，創(chuàng)建Vue工程
vue init webpack myprojectName
6.會(huì)彈出來很多選項(xiàng)，可以直接敲enter鍵，選擇默認(rèn)
如圖：在執(zhí)行完之后，就會(huì)在電腦上創(chuàng)建一個(gè)lxy123的項(xiàng)目

圖片.png

7.安裝Vue的模塊
重新CD到工程目錄README文件的上一層目錄，然后執(zhí)行安裝Vue操作

圖片.png

cd lxy123 然后執(zhí)行 npm install 注：執(zhí)行完這個(gè)工程目錄下面會(huì)多出一個(gè)文件夾node_modules，其實(shí)執(zhí)行這個(gè)之后，就不用再單獨(dú)執(zhí)行安裝第八步驟中的路由和請(qǐng)求木塊。因?yàn)?npm install 是安裝了package.json所有的模塊

npm install 表示安裝package.json文件中的模塊，一般創(chuàng)建新項(xiàng)目的時(shí)候我們會(huì)直接執(zhí)行這個(gè)操作
npm install

但是當(dāng)我們后續(xù)需要添加一些別的依賴或者框架的時(shí)候，就可以執(zhí)行
npm install vue-resource --save
說明：vue-resource是一個(gè)依賴的名稱

8.安裝Vue請(qǐng)求模塊(可以根據(jù)自己的需求選擇是否執(zhí)行這個(gè)步驟來安裝需要的框架、模塊)
npm install vue-resource --save 或者 cnpm install vue-resource

圖片.png

圖片.png

npm install 和 npm install --save ，npm install --save-dev的區(qū)別
使用 --save-dev 安裝的 插件，被寫入到 devDependencies 域里面去，而使用 --save 安裝的插件，則是被寫入到 dependencies 區(qū)塊里面去。
那 package.json 文件里面的 devDependencies 和 dependencies 對(duì)象有什么區(qū)別呢？
devDependencies 里面的插件只用于開發(fā)環(huán)境，不用于生產(chǎn)環(huán)境，dependencies 是需要發(fā)布到生產(chǎn)環(huán)境的。比如我們寫一個(gè)項(xiàng)目要依賴于jQuery，沒有這個(gè)包的依賴運(yùn)行就會(huì)報(bào)錯(cuò)，這時(shí)候就把這個(gè)依賴寫入dependencies ；而我們使用的一些構(gòu)建工具比如glup、webpack這些只是在開發(fā)中使用的包，上線以后就和他們沒關(guān)系了，所以將它寫入devDependencies。

圖中開發(fā)和生產(chǎn)標(biāo)注錯(cuò)了?。。。。?！

圖片.png

cnpm和npm的區(qū)別：
cnpm是安裝的引用文件
npm安裝是將文件下載到本地

PS：在經(jīng)歷了前4步之后，我發(fā)現(xiàn)，其實(shí)可以省略幾個(gè)步驟
可以省略： npm install --save

圖片.png

圖片.png