首先，先列出我們接下來需要的東西：

• node.js環境（npm包管理器）
• vue-cli 腳手架構建工具
• cnpm npm的淘寶映象

1.安裝Node.js
node.js官網：https://nodejs.org/en/
從node.js官網下載並安裝node，下載完成後，一直點下一步就ok了，安裝完之後，我們通過開啟命令列工具（win+R）,輸入node -v 命令，檢視node的版本，若出現相應的版本號，那麼恭喜您說明你安裝成功了。

2. 安裝cnpm
在命令列中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org ，然後等待安裝成功，

3.安裝vue-cli 腳手架構建工具
在命令列中執行命令 npm install -g vue-cli ，然後等待安裝完成。

通過以上三步，我們需要準備的環境和工具都準備好了，接下來就開始使用vue-cli來構建專案。
首先我們要選擇存放專案的位置，然後再用命令列將目錄轉到選定的目錄，在這裡，我選擇在c盤下建立新的目錄（VueTest 目錄）：
在NodeTest 目錄下，在命令列中執行命令 vue init webpack firstApp 。這個命令的意思是初始化一個專案，其中webpack是構建工具，也就是整個專案是基於webpack的。其中firstApp是整個專案資料夾的名稱，這個資料夾會自動生成在你指定的目錄中。
建立的生活需要填寫幾個配置項。如專案名稱、專案描述、作者資訊，對於有些不明白或者不想填的資訊可以一直按回車去填寫就好了，等待一會，就會顯示建立專案建立成功。

 build：最終釋出的程式碼的存放位置。
 config：配置路徑、埠號等一些資訊，我們剛開始學習的時候選擇預設配置。
 node_modules：npm 載入的專案依賴模組。
 src：這裡是我們開發的主要目錄，基本上要做的事情都在這個目錄裡面，裡面包含了幾個目錄及檔案：
         assets:放置一些圖片，如logo等
         components:目錄裡放的是一個元件檔案，可以不用。
         App.vue：專案入口檔案，我們也可以將元件寫這裡，而不使用components目錄。
        main.js ：專案的核心檔案
 static：靜態資源目錄，如圖片、字型等。
 test：初始測試目錄，可刪除
  .XXXX檔案：配置檔案。
 index.html：首頁入口檔案，可以新增一些meta資訊或者同統計程式碼啥的。
 package.json：專案配置檔案
 README.md：專案的說明檔案。
 

這就是整個專案的目錄結構，其中，我們主要在src目錄中做修改。這個專案現在還只是一個結構框架，整個專案需要的依賴資源都還沒有安裝。
安裝專案所需要的依賴：執行 cnpm install (這裡可以用cnpm代替npm了)

安裝完成之後，我們到自己的專案中去看，會多一個node_modules資料夾，這裡面就是我們所需要的依賴包資源。

安裝完依賴包資源後，我們就可以執行整個專案了。
執行專案
在專案目錄中，執行命令 npm run dev 。

這樣就表示執行起來了 開啟這個網址 效果圖如下

這樣我們就建立了咱們的第一個Vue專案哦

摘自 程式媛-jjl
原文：https://blog.csdn.net/m0_37479246/article/details/78836686