1. 程式人生 > >vue-cli快速搭建vue專案

vue-cli快速搭建vue專案

1.安裝node(使用6+)

2.安裝cnpm:安裝包時,記得以管理員許可權開啟cmd

3.安裝vue-cli :npm install -g vue-cli

4.建立專案:vue init webpack XX  (請確保安裝了webpack)

5.開發模式的檔案在src目錄下,進入檔案後,開啟package.json ,檢視配置資訊

6.安裝專案需要的依賴包:cnpm install (or npm install) 

7.安裝好後,執行npm run dev (以開發環境 | 熱載入執行):熱載入可以讓我們在修改完程式碼後不用手動重新整理瀏覽器就能實時看到修改後的效果。

這裡簡單介紹下 npm run dev 命令,其中的“run”對應的是package.json檔案中,scripts欄位中的dev,也就是 node build/dev-server.js命令的一個快捷方式。

專案執行成功後,瀏覽器會自動開啟localhost:8080(如果瀏覽器沒有自動開啟,可以手動輸入)。執行成功後,會看到如下所示的介面

以後如果自己寫的專案,也可以通過這種方式進行開發!至於進行單元測試,以及打包(npm run build)可自行百度深入瞭解