1. 程式人生 > >搭建vue環境

搭建vue環境

net 鏡像 attribute int 創建項目 驗證 完全 開頭 src

1.安裝node.js
進入官網 :https://nodejs.org/en/
技術分享圖片
選擇適合自己的版本下載,可以一直選擇下一步進行安裝。

2.驗證node是否安裝成功
安裝完成之後,在桌面打開終端 (win鍵+r鍵輸入“cmd”即可打開),在終端輸入“node -v” 會出現你所安裝的對應版本就是安裝成功
技術分享圖片

3.安裝cnpm
由於npm是國外的,使用起來很慢,所以用淘寶鏡像cnpm代替npm,功能完全一樣
終端裏面輸入

npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 1

等待安裝,安裝成功之後輸入 “npm -v ” 出現版本號,證明已經安裝成功

4.安裝vue-cli腳手架
終端輸入命令行

cnpm install --global vue-cli
  • 1

回車,等待安裝

5.驗證vue 版本
當腳手架安裝完成之後,可以在終端輸入 vue -V 查看版本
技術分享圖片

———————————————————到這裏,環境搭建基本完成——————————————
如果沒有換電腦的話,以後做項目就可以直接進入下面的步驟
如果換電腦,就要再次按照上面步驟為電腦搭建一個vue環境。

———————————————————接下來,是每次創建vue的新項目的第一步驟——————-

1.進入到想要放vue項目的文件夾
進入到項目的存放目錄,shift+鼠標右鍵,點擊“在此處打開命令窗口”
技術分享圖片


不進入項目目錄也可以,只是如果不進入,待會生成的目錄就會在桌面,占空間。

2.創建vue項目
在該目錄下,打開終端 輸入 “vue init webpack VueProject” (這個命令的意思就是 我創建了一個vue項目,並且命名為“VueProject” 即通用一點表達就是 “vue init webpack 項目名”)
等了很久很久之後………………
會出現 Project name 開頭的命令的時候,接下來一直回車就可以
如果有(Y/N)選擇的,除了vue-router選Y,其他都選N。(全部選N也可以)
技術分享圖片

創建成功之後,會輸出一個命令行 教我怎麽運行vue項目
技術分享圖片
不知道為什麽有這麽多ERR!!
看著心拔涼拔涼的,但是不管哈哈哈哈

3.運行vue項目
根據剛剛創建項目成功之後輸出的命令行
進入VueProject項目(即是剛剛 vue init webpack VueProject),打開命令行, 輸入命令 “npm run dev”
就會出現下圖
技術分享圖片
會出現一個地址:http://localhost:8080

打開瀏覽器輸入:http://localhost:8080 回車

技術分享圖片

vue項目搭建成功

記錄vue的知識點,有不對的地方,請各位指正

搭建vue環境