Vue作為前端三大框架之一截至到目前在GitHub上已收獲65,873顆星典勇，足以說明其以悄然成為主流桅锄。16年10月Vue發(fā)布了2.x版本琉雳，經(jīng)過了一段時間的摸索和看官方的教程和api，才了解到2.0版本在1.0版本的基礎(chǔ)上做了好多調(diào)整竞滓，廢棄了好多API咐吼。。商佑。锯茄。
ps：高手請繞道。
說明：此文章參考了網(wǎng)上一些前人的技術(shù)分享茶没，自己拿過來總結(jié)一下肌幽。
此文章是基于webpack構(gòu)建的vue項目，并實現(xiàn)簡單的單頁面應(yīng)用抓半。其中利用到的相關(guān)技術(shù)會簡單加以說明
一喂急、那么我們就從最簡單的環(huán)境搭建開始：
- 安裝node.js，從node.js官網(wǎng)下載并安裝node笛求，安裝過程很簡單廊移，一路“下一步”就可以了（傻瓜式安裝）糕簿。安裝完成之后，打開命令行工具(win+r狡孔，然后輸入cmd)懂诗，輸入 node -v，如果出現(xiàn)相應(yīng)的版本號苗膝，則說明安裝成功殃恒。
- 安裝淘寶鏡像，打開命令行工具辱揭，把這個
npm install -g復(fù)制（這里要手動復(fù)制就是用鼠標(biāo)右鍵那個离唐，具體為啥不多解釋），安裝這里是因為我們用的npm的服務(wù)器是國外问窃，有的時候我們安裝“依賴”的時候很很慢很慢超級慢亥鬓，所以就用這個cnpm來安裝我們說需要的“依賴”。安裝完成之后輸入 cnpm -v泡躯，如果出現(xiàn)相應(yīng)的版本號贮竟，則說明安裝成功。
- 安裝webpack较剃，打開命令行工具輸入：
npm install webpack -g，安裝完成之后輸入 webpack -v技健，如果出現(xiàn)相應(yīng)的版本號写穴，則說明安裝成功。
- 安裝vue-cli腳手架構(gòu)建工具雌贱，打開命令行工具輸入：
npm install vue-cli -g啊送，安裝完成之后輸入 vue -V（注意這里是大寫的“V”），如果出現(xiàn)相應(yīng)的版本號欣孤，則說明安裝成功馋没。
二、通過以上四步降传，我們需要準(zhǔn)備的環(huán)境和工具都準(zhǔn)備好了篷朵，接下來就開始使用vue-cli來構(gòu)建項目
在硬盤上找一個文件夾放工程用的。這里有兩種方式指定到相關(guān)目錄：①cd 目錄路徑 ②如果使用git的婆排，在相關(guān)目錄右鍵選擇Git Bash Here
安裝vue腳手架輸入：
vue init webpack exprice声旺，注意這里的“exprice” 是項目的名稱可以說是隨便的起名，但是需要注意的是“不能用中文”段只。
$ vue init webpack exprice --------------------- 這個是那個安裝vue腳手架的命令
This will install Vue 2.x version of the template. --------------------- 這里說明將要創(chuàng)建一個vue 2.x版本的項目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------項目名稱
? Project name exprice
? Project description (A Vue.js project) ---------------------項目描述
? Project description A Vue.js project
? Author Datura --------------------- 項目創(chuàng)建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安裝Vue路由腮猖，也就是以后是spa（但頁面應(yīng)用需要的模塊）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n --------------------- 是否啟用eslint檢測規(guī)則，如果是新手小白的話赞枕，這里個人建議選no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 這里說明如何啟動這個服務(wù)
cd exprice
npm install
npm run dev
如下圖：
cd 命令進(jìn)入創(chuàng)建的工程目錄澈缺，首先
cd exprice（這里是自己建工程的名字）坪创；安裝項目依賴：
npm install，因為自動構(gòu)建過程中已存在package.json文件姐赡，所以這里直接安裝依賴就行莱预。不要從國內(nèi)鏡像cnpm安裝(會導(dǎo)致后面缺了很多依賴庫)，但是如果真的安裝“個把”小時也沒成功那就用：cnpm install 吧安裝 vue 路由模塊 vue-router 和網(wǎng)絡(luò)請求模塊 vue-resource雏吭，輸入：
cnpm install vue-router vue-resource --save锁施。
創(chuàng)建完成的“exprice”目錄如下：
- 下面簡單的說明一下各個目錄都是干嘛的：
- 啟動項目，輸入：
npm run dev杖们。服務(wù)啟動成功后瀏覽器會默認(rèn)打開一個“歡迎頁面”：
注意：這里是默認(rèn)服務(wù)啟動的是本地的8080端口悉抵，所以請確保你的8080端口不被別的程序所占用。
給大家推薦一個ide用Atom然后安裝vue插件即可摘完，非常之好用
