1.在搭建專案之前，先安裝淘寶鏡像和命令列工具，可能需要等待一段時間（電腦安裝過一遍之后，以后建專案時就不需要再安裝）：
a.Win+R打開命令提示行cmd；
b.進入命令列cmd，設定淘寶鏡像；
npm config set registry https://registry.npm.taobao.orgc.安裝可生成腳手架代碼的命令列工具；
npm i -g @vue/cli當命令列視窗顯示 [ + @vue/cli@版本號 ] 時說明安裝成功，
2.開始創建專案
a.先決定要把專案檔案夾保存在哪個位置；此處以test檔案夾為例；
b.進入test檔案夾后，shift+滑鼠右鍵打開power shell視窗；
c.運行 vue create 自定義專案名；此處以專案名為test為例，出現提示后按以下程序進行選擇：
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說明專案創建成功，
此時我們便可在test檔案夾中看到整個專案，
3.使用vscode打開并運行腳手架專案
（1）右鍵單擊package.json檔案，選擇"在集成終端中打開"；
（2）在終端視窗中輸入：npm run serve，等待后出現App running at : - Local :http://localhost:8080/，如下：
（3）按住Ctrl，點local:右側的連接，即可自動打開瀏覽器，
需要的時候就可以在集成終端中輸入npm i、npm i vant -S 等命令下載node_modules包、安裝vant等等，
注意vue采用的是熱編譯，修改后無需停止或重啟專案，只要一修改，就會立刻自動重新編譯，重新運行，自動在界面上顯示新內容，
Vue實戰知識點相關鏈接：
如何在vue頁面中引入其他的子組件？(區域引入/全域引入)_小馬學前端的博客-CSDN博客
如何在vue組件中引入外部的css和js檔案_小馬學前端的博客-CSDN博客
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/310599.html
標籤：其他