最近幾年前端框架大放異彩遏插，目前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文件夾
