Vue腳手架使用步驟 2.9.6版本

轉載自：https://blog.csdn.net/sky_LQ/article/details/80729547

Vue腳手架使用步驟

2018年06月19日 12:10:35 sky_LQ 閱讀數：3444

 

1、安裝webpack

全局安裝webpack命令行： npm install webpack -g

2、安裝vue-cli腳手架構建工具

 

全局安裝，輸入命令行： npm install vue-cli -g

安裝完成后執行命令:   vue -V 查看版本號，出現相應得版本即為安裝成功

 

3、通過vue-cli，初始化vue項目

通過以上幾步，將我們安裝腳手架所需要的環境和工具都准備好好了，下面就可以使用vue-cli來初始化項目。

 

   (3.1) : 新建一個mySelf（項目名）文件夾來放置項目，

在新建文件夾的上一級文件夾右鍵打開命令行工具，輸入命令行：vue init webpack mySelf(項目名)

注：項目名不能大寫，不能使用中文 

解釋一下這個命令，這個命令的意思是初始化一個vue項目，其中webpack是構建工具，也就是整個項目是基於webpack的。其中mySelf是整個項目文件夾的名稱，這個文件夾會自動生成在你指定的目錄中。

 

 

  (3.2) : 以下是腳手架安裝過程（安裝步驟解析在圖片下面）

 

vue-cli初始化項目選項配置詳細解析

 

(3.3）如何運行項目

 

1. 進入你剛才創建在my-self項目的文件夾里面,我是在D盤里面創建的，我在D盤，需要進入自己創建的文件夾里面

      2、安裝項目依賴。命令行： npm install。前面在項目初始化的時候，已經存在了package.json文件，直接使用npm install 安裝項目所需要的依賴，否則項目不能正確運行。

 

    創建完成的“vuetext1”目錄如下：

3、到這里，我們已經成功使用vue-cli初始化了一個vue項目。

 

            啟動項目：

            在my-self目錄運行命令行npm run dev或者npm start，啟動服務，服務啟動成功后瀏覽器會默認打開一個“歡迎頁面”，如下圖。

注意：這里是默認服務啟動的是本地的8080端口，所以請確保你的8080端口不被別的程序所占用，當有其他vue項目運行的時候，可以使用ctrl+c來中斷運行。

 

4、修改端口，可以在下圖文件夾中修改