安裝nodejs和npm

這個(gè)就不細(xì)說(shuō)了，網(wǎng)上有很多相關(guān)資料。

注意，如果npm版本低可能不行，升級(jí)npm使用命令：

sudo npm install -g npm

查看npm版本使用命令

npm -v

安裝淘寶鏡像

安裝命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

驗(yàn)證命令：cnpm -v

安裝webpack

可能需要提前安裝webpack-cli npm install webpack-cli -g

安裝webpack npm install webpack -g

驗(yàn)證 webpack -v

注意：webpack依賴webpack-cli，但是webpack-cli并不會(huì)自動(dòng)安裝，所以需要我們手動(dòng)安裝。

如果未安裝，當(dāng)執(zhí)行命令webpack -v會(huì)提示是否安裝，直接yes安裝即可。應(yīng)該也可以提前先安裝完再安裝webpack

安裝vue

安裝語(yǔ)句為：npm install --global vue-cli

驗(yàn)證命令:vue -V (注意V要大寫(xiě))

新建vue項(xiàng)目

打開(kāi)webstorm（要高版本，至少2017版本及以下沒(méi)有），依次點(diǎn)擊new project -> vuejs，然后輸入項(xiàng)目名稱，一路next即可。

打開(kāi)項(xiàng)目后等待build完成，可以看到運(yùn)行欄出現(xiàn)npm start，點(diǎn)擊run即可運(yùn)行項(xiàng)目。

如果點(diǎn)擊run出錯(cuò)如下：

[webpack-dev-server: command not found]

在終端中，在項(xiàng)目目錄下執(zhí)行cnpm install，然后執(zhí)行npm run dev就運(yùn)行起來(lái)了，這時(shí)候打開(kāi)http://localhost:8081就可以看到了。

然后下次運(yùn)行就可以直接run了。

總結(jié)

以上是生活随笔為你收集整理的mac上搭建vue环境及webstorm新建vue项目的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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