首先在使用vue之前的準(zhǔn)備工作。

環(huán)境：

1)安裝node

去官網(wǎng)https://nodejs.org/en/下載安裝包，安裝完成后，輸入node -v 看下是否成功。

node? ?-v 檢測(cè)安裝結(jié)果

如上圖所示，即為成功。

2）安裝cnpm?

輸入命令: $sudo npm install -g cnpm --registry=https://registry.npm.taobao.org --verbose

此時(shí)會(huì)提示讓你輸入一個(gè)密碼，即你的用戶(hù)開(kāi)機(jī)密碼，輸入回車(chē)即可，如果出現(xiàn)下面的信息（最下面幾行）說(shuō)明安裝成功：

cnpm

輸入命令：cnpm -v 檢測(cè)是否成功。

cnpm -v 安裝檢測(cè)結(jié)果

如上圖所示，即為成功。

3）安裝腳手架

輸入命令：$sudo npm install -g vue-cli

此時(shí)也會(huì)讓你輸入開(kāi)機(jī)密碼，等待即可。

再輸入命令：vue -V 驗(yàn)證是否安裝完成。

vue -V 安裝檢測(cè)結(jié)果

如圖所示，顯示版本號(hào)即為安裝成功。

工具：

環(huán)境安裝好了之后，開(kāi)始新建項(xiàng)目了。我用的是vscode，所以以下是以vscode為例運(yùn)行vue項(xiàng)目的，僅供參考。

新建一個(gè)文件夾，用vscode打開(kāi)。然后打開(kāi)vscode的終端(ctrl+`或者在查看【view】里找到終端【terminal】)。即可打開(kāi)。

然后執(zhí)行命令：vue init webpack projectname,（這里的projectname是你自己命名的。）

然后一直按確認(rèn)或輸入y按確認(rèn)，等待項(xiàng)目初始化，如下圖

init

項(xiàng)目完成后，在執(zhí)行如下圖所示的命令：

運(yùn)行命令

執(zhí)行：cd vueTest(這里的vueTest就是你命名的projectname)

在執(zhí)行：npm run dev，成功之后如下圖

運(yùn)行地址

這個(gè)時(shí)候你只要把http://localhost:8080/#/復(fù)制在網(wǎng)頁(yè)上打開(kāi)就可以看到了

vue

做到這一步，恭喜，你成功了。接下來(lái)你就可以開(kāi)始自己的項(xiàng)目了。