安裝nodejs

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

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

安裝yarn（可選）

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

安裝vue-cli

驗(yàn)證vue-cli是否已安裝

安裝vue-cli命令

$ cnpm install -g @vue/cli

驗(yàn)證是否安裝成功：

卸載vue-cli

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

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

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

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

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

ps：此處 Choose Vue version要取消選中，因?yàn)檫x擇了3.x版本后導(dǎo)致報(bào)錯(cuò)。

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

• 本次報(bào)錯(cuò)直接執(zhí)行了清除npm緩存后問(wèn)題解決。

npm cache clean --force

啟動(dòng)項(xiàng)目

訪(fǎng)問(wèn)：

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

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

總結(jié)

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

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