1.在搭建項(xiàng)目之前，先安裝淘寶鏡像和命令行工具，可能需要等待一段時(shí)間（電腦安裝過一遍之后，以后建項(xiàng)目時(shí)就不需要再安裝）：
a.Win+R打開命令提示行cmd；
b.進(jìn)入命令行cmd，設(shè)置淘寶鏡像；
npm config set registry https://registry.npm.taobao.org
c.安裝可生成腳手架代碼的命令行工具；
npm i -g @vue/cli
當(dāng)命令行窗口顯示 [ + @vue/cli@版本號(hào) ] 時(shí)說明安裝成功。
2.開始創(chuàng)建項(xiàng)目
a.先決定要把項(xiàng)目文件夾保存在哪個(gè)位置；此處以test文件夾為例；
b.進(jìn)入test文件夾后，shift+鼠標(biāo)右鍵打開power shell窗口；
c.運(yùn)行 vue create 自定義項(xiàng)目名；此處以項(xiàng)目名為test為例，出現(xiàn)提示后按以下過程進(jìn)行選擇：
1）? Please pick a preset:
2）? Check the features needed for your project:
3）? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) N
4）? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
5）? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
6）? Save this as a preset for future projects? (y/N) N
最后命令行窗口顯示Successfully created project xzvue說明項(xiàng)目創(chuàng)建成功。
此時(shí)我們便可在test文件夾中看到整個(gè)項(xiàng)目。
3.使用vscode打開并運(yùn)行腳手架項(xiàng)目
（1）右鍵單擊package.json文件，選擇"在集成終端中打開"；
（2）在終端窗口中輸入：npm run serve，等待后出現(xiàn)App running at : - Local :http://localhost:8080/，如下：
（3）按住Ctrl，點(diǎn)local:右側(cè)的連接，即可自動(dòng)打開瀏覽器。
需要的時(shí)候就可以在集成終端中輸入npm i、npm i vant -S 等命令下載node_modules包、安裝vant等等。
注意vue采用的是熱編譯，修改后無需停止或重啟項(xiàng)目，只要一修改，就會(huì)立刻自動(dòng)重新編譯，重新運(yùn)行，自動(dòng)在界面上顯示新內(nèi)容。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
轉(zhuǎn)自：csdn
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
