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

一、安裝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=https://registry.npm.taobao.org
(如果淘寶鏡像長時間沒安裝完成,請重啓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 myname
創建一個基於 webpack 模板的新項目,後面的 my-home 指的是這個項目的名稱,你也可以換成其它的。(也可以創建磁盤之後再cmd中輸入文件名)
然後會下載安裝這套模板,命令行會出現幾個問題,你跟着下面的步驟回答就可以了。(可能會出現不一樣的情況)作者在網上找了幾張類似圖片
在這裏插入圖片描述
第一行問你項目名稱,輸入 myname
第二行問你項目描述,輸入 this is my vue
第三行問作者的名字,輸入 你自己的名字就好
第四行回車,第五行yes 後面no

6.完成之後,用cd命令查找進入工程目錄

在這裏插入圖片描述
在當前工程目錄下輸入命令:cnpm install
在這裏插入圖片描述
安裝完成之後,在電腦上回到 myname 這個文件夾,裏面會多一個 node_modules 文件夾。
在這裏插入圖片描述
接着啓動項目:cmd中輸入命令:npm run dev

服務器啓動成功之後,下面就會給出一串指令告訴你:
在這裏插入圖片描述
在這裏插入圖片描述
然後打開瀏覽器進入這個頁面可以看見這樣的頁面:輸入:http://localhost:8085
在這裏插入圖片描述

已經完成!!!
這個教程基本上都能運行成功!
祝大家學業有成!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章