Vue是近兩年來比較火的一個(gè)前端框架（漸進(jìn)式框架吧）。?Vue兩大核心思想：組件化和數(shù)據(jù)驅(qū)動(dòng)。組件化就是將一個(gè)整體合理拆分為一個(gè)一個(gè)小塊（組件），組件可重復(fù)使用；數(shù)據(jù)驅(qū)動(dòng)是前端的未來發(fā)展方向，釋放了對DOM的操作，讓DOM隨著數(shù)據(jù)的變化自然而然的變化（尤神原話），不必過多的關(guān)注DOM，只需要將數(shù)據(jù)組織好即可。本文用Vue-cli從零開始搭建一個(gè)Vue項(xiàng)目。
準(zhǔn)備工作
1、下載安裝Node.js
下載地址：https://nodejs.org/en/download/ ，選擇合適自己的版本下載即可。?
具體怎么安裝Node.js就不用具體說明了，安裝Node.js會(huì)默認(rèn)安裝npm（包管理工具）。
2、啟用cmd
按下Windows+R，在打開的“運(yùn)行”程序窗口，輸入“cmd”，并按下回車鍵，即可打開系統(tǒng)自帶的命令提示符。
3、安裝cnpm
npm是Node.js提供的包管理工具，因?yàn)閚pm安裝插件是從國外服務(wù)器下載，受網(wǎng)絡(luò)影響大，可能出現(xiàn)異常，我們可以用淘寶?npm?鏡像cnpm代替默認(rèn)的?npm。
方法一：使用npm安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
注：這樣可能會(huì)導(dǎo)致npm和cnpm版本可能不一樣。
方法二：用alias?命令設(shè)置別名
alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"
輸入cnpm -v查看cnpm版本，來檢查cnpm是否正確安裝。如未正常安裝請檢查系統(tǒng)變量path是否配置正確（不是本文重點(diǎn)，此處不再贅述）。
4、安裝vue-cli
使用cnpm全局安裝vue-cli,在cmd中輸入一下命令（注：“-g”這個(gè)參數(shù)意思是全局安裝)
?cnpm install --global vue-cli
正式動(dòng)手
準(zhǔn)備工作做好之后，開始正式初始化項(xiàng)目。選擇webpack作為打包工具，項(xiàng)目名是mydemo，然后按照提示填寫一些配置。這些配置最終會(huì)安裝相應(yīng)的模塊并且寫到項(xiàng)目的package.json中。
1、新建項(xiàng)目mydemo
vue init webpack mydemo
mydemo是項(xiàng)目名稱，這個(gè)名字自己隨便取（不能有大寫字母）。命令輸入后，會(huì)進(jìn)入安裝階段，需要用戶輸入一些信息。
信息詳情：
----------------------------------------------------------------------------------------------------------------------------
Project name (vuetest)
項(xiàng)目名稱，可以自己指定，也可直接回車，按照括號(hào)中默認(rèn)名字。
Project description (A Vue.js project)?
項(xiàng)目描述，也可直接點(diǎn)擊回車，使用默認(rèn)名字。
Author
作者，可以自己指定，也可直接回車。
接下來會(huì)讓用戶選擇
Runtime + Compiler: recommended for most users?
運(yùn)行加編譯，既然已經(jīng)說了推薦，就選它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere
僅運(yùn)行時(shí)，已經(jīng)有推薦了就選擇第一個(gè)了
Install vue-router? (Y/n)???
是否安裝vue-router，這是官方的路由，大多數(shù)情況下都使用，這里就輸入“y”后回車即可。
Use ESLint to lint your code? (Y/n)?????
是否使用ESLint管理代碼，ESLint是個(gè)代碼風(fēng)格管理工具，是用來統(tǒng)一代碼風(fēng)格的，并不會(huì)影響整體的運(yùn)行。
Setup unit tests with Karma + Mocha? (Y/n)?
是否安裝單元測試。
Setup e2e tests with Nightwatch(Y/n)?? ??
是否安裝e2e測試。
----------------------------------------------------------------------------------------------------------------------------
用編輯器打開項(xiàng)目，目錄結(jié)構(gòu)大致是這樣的。
目錄介紹：
----------------------------------------------------------------------------------------------------------------------------
bulid??
里面是一些操作文件，使用npm run *????時(shí)其實(shí)執(zhí)行的就是這里的文件。
config
配置文件，執(zhí)行文件需要的配置信息。
src??
資源文件，所有的組件以及所用的圖片都是在這個(gè)文件夾下放著。簡單看一下這個(gè)文件夾下都放了哪些東西。
assets?
資源文件夾，放圖片之類的資源，
components?
組件文件夾，寫的所有組件都放在這個(gè)文件夾下，
router?
路由文件夾，這個(gè)決定了頁面的跳轉(zhuǎn)規(guī)則，
App.vue
應(yīng)用組件，所有自己寫的組件，都是在這個(gè)組件之上運(yùn)行了。
main.js? ?
webpack入口文件。
----------------------------------------------------------------------------------------------------------------------------
2在mydemo下安裝依賴
切換到項(xiàng)目目錄
cd mydemo
安裝模塊
cnpm install
它根據(jù)package.json的配置表進(jìn)行安裝，安裝完后會(huì)在mydemo下多一個(gè)文件夾node_modules，這里的文件對應(yīng)著package.json里的配置信息。
3、運(yùn)行mydemo
輸入命令
npm run dev
在瀏覽器輸入地址http://localhost:8080，看到如下頁面，說明大功告成，一個(gè)Vue項(xiàng)目已經(jīng)初始化完成！
