建立vue專案最重要的是環境搭建，

第一步：node.js安裝（地址：https://nodejs.org/en/）

安裝好以後，node和npm的環境都搭建好了。新建一個資料夾，用windows PowerShell （shift+右鍵） 開啟命令列：

1.node -v 檢視node的版本。

2.npm -v 檢視npm的版本。

這樣就沒問題。

我們可以使用定製的cnpm(有下劃線的關鍵字都能跳轉到官網) 命令列工具代替預設的npm，用淘寶代理，這樣可以提高效率:

npm install -g cnpm --registry=https://registry.npm.taobao.org

第二步：vue專案環境搭建，生成檔案。

全域性搭建uve 互動式的專案腳手架vue-cli:

 npm install --global vue-cli

vue list 用來檢視安裝的版本：

vue list

這是正常狀態。

輸入下面命令生成vue的標準模板

vue init webpack my-vue

專案名 和 安裝vue-router 重要，其他的回車和n就行。

　安裝好以後會自動出現預設模板的vue檔案了。

生成的檔案，然後我們用編輯器開啟。

第三步：執行vue專案。

這是hbuilder用開啟的，然後打來命令列，輸入命令：

npm run dev

就能看到下面返回了一個連結，放到瀏覽器就能打開了。

上面是用hbuilder開啟的，我們也可以用IntelliJ IDEA 開啟，但是我們要配置執行環境：

我們點選新增啟動配置，選擇npm scripts 選擇dev,然後ok.

點選執行按鈕就相當於執行了npm run dev 程式碼。我們就能看到下面返回了一個連結，放到瀏覽器就能打開了。

對於前端開發者來說，通過安裝腳手架一步步建立vue專案雖然看起來很麻煩，但是建立成功後使用是非常的方便，開發vue最重要的就是元件，每一個頁面都是一個元件，非常的靈活，雙向繫結，和迴圈遍歷資料都非常的好用。

原文地址：https://www.cnblogs.com/liuzhou1/p/11905985.html