最近幾年前端框架大放異彩，目前Vue、React、Angular框架已經(jīng)三分天下，Vue.js是一個(gè)提供MVVM數(shù)據(jù)雙向綁定的庫(kù)，專(zhuān)注于UI層面，核心思想是：數(shù)據(jù)驅(qū)動(dòng)、組件系統(tǒng)，vue,js是款輕量級(jí)、入門(mén)容易、學(xué)習(xí)成本比較輕的框架。
一、安裝環(huán)境
1.安裝node.js，從node.js官網(wǎng)下載并安裝node，node會(huì)自動(dòng)安裝npm包的，安裝過(guò)程很簡(jiǎn)單，一路“下一步”就可以了（傻瓜式安裝）。安裝完成之后，打開(kāi)命令行工具(win+r，然后輸入cmd)，輸入 node -v，如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)，則說(shuō)明安裝成功。
2.安裝webpack，打開(kāi)命令行工具輸入：npm install webpack -g，安裝完成之后輸入 webpack -v，如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)，則說(shuō)明安裝成功。
3.安裝vue-cli腳手架構(gòu)建工具，打開(kāi)命令行工具輸入：npm install vue-cli -g，安裝完成之后輸入 vue -V（注意這里是大寫(xiě)的“V”），如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)，則說(shuō)明安裝成功。
二、創(chuàng)建工程
1.從本地創(chuàng)建一個(gè)文件夾，名字隨意，我這里是的項(xiàng)目名字是Project
2.進(jìn)入Project文件夾，我安裝github直接右鍵點(diǎn)擊，
3.直接上手命令行 輸入vue init webpack Project
4.第一個(gè)紅圈問(wèn)是否安裝路由? 一般我都是選yes，第二個(gè)是啟動(dòng)語(yǔ)法檢測(cè) 我直接選no，然后直接默認(rèn)下一步下一步就好了，最后就會(huì)加載一個(gè)項(xiàng)目工程出來(lái)。
6.進(jìn)入文件夾后 我們執(zhí)行npm run dev 的命令；
7.加載后就會(huì)跳出一個(gè)路徑，到瀏覽器執(zhí)行就會(huì)出現(xiàn)主界面；首次要手動(dòng)加載
8.項(xiàng)目基本結(jié)構(gòu)
9. 打開(kāi)webStorm修改自動(dòng)啟動(dòng)頁(yè)面，config/index.js第18行代碼值改為true即可
10.index.js文件中第46行代碼加個(gè)小數(shù)點(diǎn)，這是打包圖片路徑問(wèn)題
11.utils.js第48行代碼塊retuen里面添加 publicPath:'../../'? 句代碼
12.輸入打包命令 npm run build 就會(huì)執(zhí)行打包，產(chǎn)生一個(gè)dist文件夾
