Vue安裝與環境配置步驟詳解

Posted on by

1、安裝node.js

從node.js官網下載並安裝node，安裝過程很簡單，一路“下一步”就可以瞭（傻瓜式安裝）。安裝完成之後，打開命令行工具(win+r，然後輸入cmd)，輸入 node -v，如下圖，如果出現相應的版本號，則說明安裝成功。

2、查看npm

安裝好node.js，就已自帶npm（包管理工具）打開命令行工具(win+r，然後輸入cmd)，輸入 npm -v 命令查看npm是否安裝成功。

3、安裝npm的國內鏡像—cnpm

在命令行中輸入npm install -g cnpm –registry=http://registry.npm.taobao.org,安裝完成之後可以使用cnpm -v命令查看是否安裝成功，如果輸出版本號即安裝成功。

4、安裝webpack（一款開源的前端打包工具）

打開命令行工具輸入：cnpm install webpack -g

5、查看webpack是否安裝成功

安裝完成之後輸入 webpack -v，如果出現xxx not installed,則需要執行對應指令，如下圖，就執行命令cnpm install webpack -D和cnpm install webpack-dev-server -D

如果出現相應的版本號，則說明安裝成功。

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

打開命令行工具輸入：cnpm install vue-cli -g，安裝完成之後輸入 vue -V（註意這裡是大寫的“V”），如下圖，如果出現相應的版本號，則說明安裝成功。

7、創建Vue項目

打開命令行工具，進入相應的文件夾路徑下，執行命令vue init webpack vueDemo（自己的項目名）

補充：vue-cli Failed to download repo vuejs-templates/webpack連接超時解決辦法

在我配置完nmp、node.js、vue-cli環境，準備創建項目進行最後一步的測試的時候Vue init webpack 項目名 總是失敗，都是報這個錯，原因是因為無法連接外網或者連接超時導致

經過查閱資料，記錄下自己的錯誤。

解決的辦法是使用離線下載，我們需要下載github倉庫中的vue-templates/webpack，然後解壓到本地。：

需要手動下載 webpack-simple 模板，進入鏈接https://github.com/vuejs-templates/webpack

下載到我們的c盤用戶目錄下，自己創建的 .vue-templates文件夾，解壓到當前文件夾，並且命名為webpack

再進行vue init webpack vuedemo命令的時候，需要帶上參數--offline表示離線初始化。這樣就能成功創建瞭，接下來就是創建項目的參數瞭。

最後創建完，npm run dev啟動項目，在瀏覽器輸入http://localhost:8080/測試一下，成功

總結

到此這篇關於Vue安裝與環境配置步驟的文章就介紹到這瞭,更多相關Vue安裝與環境配置內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：