安裝nodejs

vue需要通過webpack打包，而webpack是基于node的，所以要先安裝nodejs環(huán)境。

#安裝cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org #驗證cnpm是否安裝成功 cnpm -v

安裝yarn（可選）

#安裝facebook的yarn包管理工具（取代npm） npm install yarn

安裝vue-cli

驗證vue-cli是否已安裝

安裝vue-cli命令

$ cnpm install -g @vue/cli

驗證是否安裝成功：

卸載vue-cli

如果需要卸載腳手架，使用如下命令:

#2.x版本使用的卸載命令 cnpm uninstall vue-cli -g #3.x 4.x版本使用的卸載命令 cnpm uninstall @vue/cli -g

使用腳手架創(chuàng)建項目

#創(chuàng)建項目 vue-app是項目名稱 $ vue create vue-app

ps: 使用gitbash出現(xiàn)方向鍵失效無法選擇的問題，所以使用默認的cmd窗口來演示。

ps：此處 Choose Vue version要取消選中，因為選擇了3.x版本后導(dǎo)致報錯。

使用vue-cli3創(chuàng)建項目的時候出錯，ERROR command failed: npm install --loglevel error --registry 解決方法： https://blog.csdn.net/tangkthh/article/details/88787714

• 本次報錯直接執(zhí)行了清除npm緩存后問題解決。

npm cache clean --force

啟動項目

訪問：

目錄結(jié)構(gòu)說明

• yarn.lock是存儲文件備份之類的
• babel.config.js是打包配置文件，類似webpack
• public目錄存儲一些公共的資源文件，比如logo圖片，圖標等

總結(jié)

以上是生活随笔為你收集整理的vue-cli4脚手架搭建实战教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。