vue-cli是快速構(gòu)建vue單頁應(yīng)用的腳手架。在學(xué)習(xí)了官網(wǎng)的教程，對(duì)vue有個(gè)初步了解之后，可以開始使用腳手架搭建，搭建過程如下
1.先安裝node，在命令行中輸入node -v，出現(xiàn)如下圖所示，表明安裝成功
2.使用npm全局安裝vue-cli，在命令行中輸入下面命令
npm install -g vue-cli
3.命令行切換到想創(chuàng)建項(xiàng)目的路徑，輸入下面命令，創(chuàng)建項(xiàng)目(firstvue是項(xiàng)目名稱)
vue init webpack firstvue
創(chuàng)建項(xiàng)目時(shí)，會(huì)出現(xiàn)下圖中的命令，前四項(xiàng)，直接按enter鍵使用默認(rèn)的即可，需要修改的話也可以自己改。
?Install vue-router？輸入"y"。這個(gè)是官方路由，單頁應(yīng)用中需要使用到的?
Use ESLint to lint your code?輸入"n"。如果想使用ESLint輸入"y"
4.cd firstvue進(jìn)入到項(xiàng)目目錄，執(zhí)行下面命令安裝項(xiàng)目依賴
npm install
5.執(zhí)行下面命令查看構(gòu)建的默認(rèn)頁面
npm run dev
至此根據(jù)腳手架構(gòu)建vue項(xiàng)目已經(jīng)完成。
構(gòu)建項(xiàng)目結(jié)構(gòu)每個(gè)文件的說明，可參考下面這篇文章
vue-cli構(gòu)建項(xiàng)目結(jié)構(gòu)解析
6.執(zhí)行下面命令，打包頁面
npm run build
打包完成后，會(huì)在根目錄下生成一個(gè)dist文件夾，這是需要部署的文件，在打包好的最底下為們會(huì)看到一個(gè)黃色的警告。當(dāng)直接使用瀏覽器打開文件時(shí)，瀏覽器控制臺(tái)會(huì)報(bào)錯(cuò)
解決該問題，將打包的絕對(duì)路徑改為相對(duì)路徑，在config\index.js文件中的build對(duì)象，將assetsPublicPath中的“/”，改為“./”即可，如果不想顯示提示，可以在build\build.js將這兩句的提示信息刪掉或注釋掉，再執(zhí)行npm run build然后瀏覽器打開index.html即可。
