第一步 準備工作

1.下載安裝Node.js

驗證是否安裝的方法，在命令列輸入node -v

2.安裝Vue

在命令列輸入npm install -g @vue/cli

檢視Vue版本號 npm vue --version

如果Vue版本太低，先解除安裝Vue低版本 npm uninstall vue-cli -g

第二步 建立Vue專案

1. 開啟要建立路徑

2-1.vue CLI3版本輸入vue create test建立名為test的專案

　接下來會問你一系列的問題

　　Please pick a preset:(Use arrow keys)//選擇使用什麼樣的工具，兩個選項：

　　　　1.default (babel,eslint)　　//預設

　　　　2.Manually select features　　//自定義，按空格選中

　　Where do you prefer placing config for Babel,PostCSS，ESLint,etc.?(Use arrow keys)　　//每一個配置都生成一個配置檔案還是都生成在package.json中

　　　　1.In dedicated config files　　//在專用的配置檔案

　　　　2.In package.json　　//在package.json

　　Save this as a preset for future projects?(y/n)　　//儲存剛剛選擇的配置

　　　　1.y

　　　　　　Save preset as:　　//儲存配置的名字

　　　　2.n

　　等待安裝……

　　安裝完成後，輸入cdtest進入專案資料夾中

　　npm run serve啟動專案

2-2.vue CLI2版本輸入vue init webpack demo //專案是基於webpack的 專案名demo

　接下來會有如下提示

　　Project name（工程名）:回車
　　Project description（工程介紹）：回車
　　Author：輸入作者名
　　Vue build（是否安裝編譯器）:回車
　　Install vue-router（是否安裝Vue路由）：回車

　　Use ESLint to lint your code（是否使用ESLint檢查js程式碼）：n
　　Set up unit tests（安裝單元測試工具）：n
　　Setup e2e tests with Nightwatch（是否安裝端到端測試工具）：n
　　Should we runnpm installfor you after the project has been created? (recommended)：回車。

第三步 啟動專案

• 進入專案目錄：cd demo
• 安裝專案所需要的依賴：npm install
• 啟動專案：npm run dev

啟動成功，瀏覽器開啟：localhost:8080，即可看到vue專案。

目錄結構

package.json

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。