vue入門002~vue項目的兩種建立方式

上面一節咱們已經成功的安裝了nodejs，而且配置了npm的全局環境變量，那麼這一節咱們就來正式的安裝vue-cli，而後在webstorm開發者工具裏運行咱們的vue項目。

這一節有兩種建立vue項目的方式

• 1，經過npm命令行建立
• 2，經過webstorm來一鍵建立項目

準備工做

• 1， 咱們在建立項目以前，須要確保nodejs已經成功安裝，若是你尚未安裝沒有配置npm全局環境變量，能夠參考 《nodeJs的安裝與npm全局環境變量的配置》
• 2，因爲國內用npm安裝三方依賴時，速度比較慢，建議你們配置國內鏡像，配置方式以下。只須要在cmd命令行窗口執行下面操做便可

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

一，使用命令行的方式建立vue項目

• 1，桌面建立一個空文件夾，如vue0117

  進入這個文件夾，而後在頂部地址欄，輸入cmd，而後回車鍵便可快速的打開dos命令行，而且定位到當前目錄。

• 2，而後執行下面命令行，安裝vue-cli。

npm install -g vue-cli

等待安裝

安裝完成以下，這裏顯示vue-cli的版本號，即表明安裝完成

• 3，使用webpack模板建立一個vue項目

vue init webpack my-project

如項目名爲vue001

在出現下面幾個詢問項時，直接按照箭頭所示的操做便可

下載項目所需類庫

項目建立完成後，以下

• 4，cd vue001進入項目目錄

• 5，執行 npm install 下載所需類庫 下載中

  下載完成

• 6，使用webstorm打開項目，點擊file，而後點擊open

導入剛纔建立的vue項目

• 7，運行項目

  項目運行成功後，在瀏覽器裏打開下面連接

  到這裏就表明項目成功的建立並運行了。

二，使用webstorm一鍵建立vue項目

• 1，點擊file，而後new，而後點擊project

• 2，構建項目

• 3，等待項目建立和類庫加載

  耗時可能比較長，耐心等待。。。。

• 3，上面構建成功後，能夠運行並瀏覽項目了

到這裏，兩種建立vue項目的方式都講完了，後面我會錄製專門的視頻來說解。敬請期待。