VUE的環境搭建

最新 04-16

技術哥

給你不一樣的世界

關注

前端學習從零起步 --Vue

全文字數： 1249

閱讀時間： 4分鐘

「

時下國內最火的三大前端框架有：Angular、React、Vue，其中Vue因其性能好、入門快、輕量化、可拓展性強、數據流雙向綁定、靈活等特點，成為了許多前端開發者搭建框架的首選。

」

Vue-Bulma開發的圖表UI界面

(轉自github 用戶wangxg2016/vue-bulma)

通過Vue開發的高仿知乎日報手機端應用

(轉自github用戶hilongjw/vue-zhihu-daily)

今天我們就開始學習基於vue的前端框架

步驟：

1.搭建nodejs環境

2.搭建vue環境並新建第一個模板工程

以下教程以windows7 x64為例：

一、nodejs環境搭建：

官網首頁:https://nodejs.org/en/，我們可以直接下載node安裝包，推薦選左邊的8.11.1LTS穩定版本，因為右邊的最新版可能不會很穩定。

Node.js官網首頁

當然還可以進download頁下載，選中對應系統位數的installer(安裝包)而不是Binary(免安裝壓縮包，需要手動配環境變數)，這裡我們選Windows Installer(.msi) 64-bit：

Node.js官網下載頁

下載完成後打開安裝包，除了選安裝路徑以外其餘一路next、accept。對，就這麼粗暴！這裡我把node.js安裝在E:目錄下：

Node.js安裝包

安裝完成後，我們需要檢測下是否安裝成功了：

Win+R(打開運行窗口)

->輸入cmd並點擊」確定」

(打開windows命令行工具)

->在命令行工具里輸入：

node -v後單擊回車鍵

(node和 –v之間有空格哦)

* 註：命令行工具建議以管理員身份運行

命令行工具列印Node.js版本號

到此，出現如」v8.2.1」的版本號則說明node安裝成功，則直接跳過如下特殊問題

關於node安裝的特殊問題：

如果通過上面的步驟安裝但出現：

「『node』不是內部或外部命令，也不是可運行的程序或批處理文件」則說明還需要配置一個叫環境變數的東西。

給node.js配置環境變數就相當於告訴計算機node.js文件路徑在哪：

右鍵點擊」我的電腦」

->點擊」屬性」

->點擊」高級系統設置」

->點擊」環境變數」

->在」系統變數」這一欄下找到」path」

->雙擊』path』進入編輯，在』值』後加上;E:/nodejs

->」環境變數」窗口點』』確定」保存設置

->」系統屬性」窗口點」確定」保存設置

->重新打開命令行工具輸入node -v檢查是否配置成功。

*註：每次配置環境變數都需要重新打開命令行工具測試配置成功與否

二、開始搭建vue環境:

我們先打開vue的官網（https://cn.vuejs.org/）

進入到教程文檔里的」安裝」一欄：

Vue搭建、新建工程並打開瀏覽器調試的指令：

這四行命令就是我們接下來工作了。

1.npm install –global vue-cli: 我們在安裝好nodejs後就可以用到「npm」這個前綴指令，並且通過node這個「倉庫」，我們以後可以通過命令行工具安裝其他很多的東西如angular-cli等。這裡的指令意思是「通過node 全局安裝vue-cli」，安裝的時間會比較長，耐心等待~

*註：下載太慢的話可以把npm換成國內鏡像：

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

通過node」倉庫」安裝vue-cli工具

如上，安裝成功~

2.vue init webpack my-project: 剛才我們通過node安裝了vue-cli工具，vue-cli是vue的命令行工具，通過它我們可以新建我們第一個vue模板工程。這裡的指令意思是：vue init [模板名] [新建的模板工程文件夾名稱]，「通過vue-cli新建webpack模板工程，名字為my-project」

新建工程的問題建議像如下去填：