1. 程式人生 > >vue--使用vue-cli構建專案

vue--使用vue-cli構建專案

webpack是現在較流行的前端自動化工具,該工具可以幫助開發者打包程式碼,以減少需要手動的工作,可以提高開發效率。

vue中提供了一個腳手架工具vue-cli,這個工具已經將webpack配置好了,使用這個工具可以快速地搭建一個標準專案。

一、安裝node

1.在 https://nodejs.org/zh-cn/   去下載,根據你的機型來選擇。

2.檢查node是否安裝成功

mac:在終端輸入 node -v

windows:開啟命令列工具,輸入 node -v

出現版本號則安裝成功

3.檢視npm是否安裝成功

mac:終端輸入 npm -v

windows:開啟命令列工具,輸入npm -v

出現版本號則安裝成功

 

windows系統下安裝成功

 二、全域性安裝vue vue-cli

1.使用命令安裝

mac:

sudo npm install vue @vue-cli -g

windows:

npm install vue @vue-cli -g

安裝時遇到問題可以參考:

https://blog.csdn.net/gebitan505/article/details/48177405

2.檢視vue是否安裝成功

vue -V

三、初始化一個vue專案

1.使用命令列

vue create 專案名(你自己定義的,並且一定要記得安裝的路徑)。

 2.之後會讓你先擇預設,作為初學者我們暫選第一項:default選項。接下來就是安裝過程。

會把各種依賴,以及vue的框架結構都幫我們搭建好。安裝好後,你會看到裡面多了很檔案以及資料夾。

四、檢視vue專案是否搭建成功

 1.使用命令列進入之前建立的專案

cd 專案名(初始化的時候定義的專案名稱)

2.啟動服務

npm run serve

這個命令會開啟一個localhost, 複製這個 localhost地址到瀏覽器,回車開啟,會看到一個vue歡迎介面。

如果能夠正常開啟,說明搭建成功!

 

原文連結:https://mp.weixin.qq.com/s/n9T6M2Md0UirnQWcmP_8Zg