Vue詳細的環境搭建,帶你快速入門。

2021-09-26 21:33:45 字數 2173 閱讀 2628

一、安裝node.js(node.js官網)

二、在node.js安裝目錄建立資料夾

1.開啟node.js的資料夾目錄,建立紅色箭頭指向的兩個資料夾。(node_global)和(node_cache)

三、配置環境變數

1.右擊我的電腦—屬性—高階系統設定—環境變數 ,如下圖:

2.複製nodejs目錄路徑(e:\node)然後選中使用者變數中的path,單擊』編輯』- ->』新建』- ->輸入剛複製的位址 - ->確認完成。

複製nodejs目錄路徑(e:\node\node_global)然後選中使用者變數中的path,單擊』編輯』- ->』新建』- ->輸入剛複製的位址 - ->確認完成。 注:本文件的目錄是作者本地的!!!

四、cmd中操作

1.啟動cmd(快捷鍵win+r),依次輸入並按回車鍵:

npm config set prefix "e:\nodejs\node_global」回車

npm config set cache 「e:\nodejs\node_cache」回車

npm root -g回車

注:node.js的目錄檔案位址改為自己的!!!

出現下面顯示說明配置成功

2.繼續安裝(基於node.js,利用**npm映象安裝相關)

在cmd中裡面輸入:npm install -g cnpm --registry=

(如果**映象長時間沒安裝完成,請重啟cmd在執行此步操作)

3.安裝完成之後檢查是否安裝成功:在cmd中輸入:cnpm -v

出現下圖所示安裝成功:

4.安裝webpack

cmd中輸入:cnpm install webpack -g

安裝vue腳手架

cmd中輸入:cnpm install vue-cli -g

(注只參考)

5.建立vue.js專案

在cmd中輸入:vue init webpack myname6.完成之後,用cd命令查詢進入工程目錄

在當前工程目錄下輸入命令:cnpm install

安裝完成之後,在電腦上回到 myname 這個資料夾,裡面會多乙個 node_modules 資料夾。

接著啟動專案:cmd中輸入命令:npm run dev

伺服器啟動成功之後,下面就會給出一串指令告訴你:

然後開啟瀏覽器進入這個頁面可以看見這樣的頁面:輸入:http://localhost:8085

已經完成!!!

這個教程基本上都能執行成功!

祝大家學業有成!

vue環境搭建詳細步驟

win r 輸入cmd,開啟dos命令板 輸入命令 npm install global vue cli 會出現以下情況 我們可以用命令列 npm v 或 node v 檢視安裝的版本號,以此來檢測是否安裝成功 三 cnpm的安裝 四 vue cli的安裝 cnpm下再全域性安裝vue cli vu...

vue cli快速搭建Vue開發環境

安裝nodejs 建議安裝 lts 版本 安裝vue cli g引數表示全域性安裝 npm install vue cli g使用vue cli初始化乙個vue專案 my project 是專案名稱,可以根據需要修改 vue init webpack my projectcd到專案目錄中安裝相關依賴...

vue環境的搭建

解壓tar.xz壓縮檔案tar zxvf tar.xz 為node和npm建立兩個軟連線,使之可以全域性執行 ln s path to bin node usr local bin node ln s path to bin npm usr local bin npmnode v npm vnpm ...