原文石墨連結：《1.使用vue-cli建立前端專案》

雖然目前已經升級到vue3，不過我之前寫的專案都是vue2寫的，記錄一下vue2相關的知識與經驗，往後再更新vue3的學習經驗

參考1：https://www.cnblogs.com/l-y-h/p/11241503.html#_label0_2

參考2：https://www.cnblogs.com/yaoyao-sun/p/10319618.html

使用vue-cli建立前端專案（目錄）

1.什麼是vue-cli

2.全域性安裝vue-cli

3.建立專案

1.什麼是vue-cli

是vue官方提供的腳手架工具。腳手架工具簡單講就是自動將專案需要的環境、依賴等資訊都配置好。

2.全域性安裝vue-cli

（1）檢查npm 版本，建議安裝到最新版本。

【命令列檢視版本號】

node -v

npm -v

 

【升級npm（可選操作）】

npm install -g npm

 

【修改為淘寶映象（可選操作）】

npm config set registry "https://registry.npm.taobao.org"

（2）安裝

【全域性安裝 webpack】

npm install webpack -g

 

【webpack 4.X 開始，需要安裝 webpack-cli 依賴】

npm install webpack webpack-cli -g

 

【檢視版本號】

webpack -v

 

【全域性安裝vue-cli】

npm install -g vue-cli

 

【檢視版本號】

vue -V
 

注：

若出現“Unexpected end of JSON input while parsing near”錯誤，

命令列輸入： npm cache clean --force

3.建立專案

（1）建立一個專案資料夾"test"，進入該資料夾

（2）

【下載模板】

vue init webpack testclient

解釋一下這個命令，這個命令的意思是初始化一個專案，其中webpack是構建工具，也就是整個專案是基於webpack的。其中testClient是整個專案資料夾的名稱，這個資料夾會自動生成在你指定的目錄中（我的例項中，會在"test"資料夾中生成該資料夾），執行初始化命令的時候回讓使用者輸入幾個基本的選項，如專案名稱，描述，作者等資訊，根據自己的習慣寫，如果不想填直接回車預設就好。

自動安裝過程省略

（3）開啟testclient資料夾，專案檔案如下所示，這就是腳手架的作用，搭建工作平臺。

Build：專案構建（webpack）相關程式碼;

config：配置目錄，包括埠號等。

node_modules：npm載入的專案依賴模組

src：這個目錄當中的內容包含了我們基本上要做的事情，這裡包含了幾個檔案

        assets：存放圖片

        components：存放元件檔案

        App.vue：專案入口檔案，元件也可以直接寫在這裡不適用components

        main.js：核心檔案

static：靜態資源目錄

test：初始測試目錄

.xxxx：配置檔案，包括git配置和語法配置等

index.html：首頁

package.json：專案配置檔案

README.md：說明文件

(4)執行專案

idea開啟專案，在專案終端輸入

npm run dev

會用熱載入的方式執行我們的應用，熱載入可以讓我們在修改完程式碼後不用手動重新整理瀏覽器就能實時看到修改後的效果。

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

專案執行成功後，瀏覽器會自動開啟localhost:8080（如果瀏覽器沒有自動開啟，可以手動輸入）。