Mac下搭建Vue開發環境以及新建Vue項目及啓動Vue項目

1、安裝HomeBrew,如果有了則忽略這一步:

#開始安裝,中間可能要輸入電腦密碼,耐心等待即可安裝成功。可通過brew -v 查看版本。
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"。

在這裏插入圖片描述

2、如果使用HomeBrew下載一些東西速度很慢可以參考以下鏈接:

Mac的homebrew更換爲阿里巴巴的源 (解決下載速度過慢問題)

3、安裝Nodejs:

#終端輸入下面命令即可開始安裝nodejs
brew install nodejs 

在這裏插入圖片描述

4、查看Nodejs版本:

#終端輸入以下命令查看版本 我的v13.10.1
node -v

在這裏插入圖片描述

5、安裝npm :

#阿里淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org

在這裏插入圖片描述

6、切換npm的源:

#查看npm的源
npm config get registry
#更換爲淘寶的源
npm config set registry https://registry.npm.taobao.org

在這裏插入圖片描述

7、安裝webpack:

WebPack可以看做是模塊打包機:它做的事情是,分析你的項目結構,找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言(Scss,TypeScript等),並將其轉換和打包爲合適的格式供瀏覽器使用。

#下列命令安裝webpack
cnpm install webpack -g

在這裏插入圖片描述

8、安裝vue腳手架(自動搭建vue項目框架的工具):

#輸入下列命令 安裝vue腳手架 耐心等待下載完成 
sudo npm install -g vue-cli

在這裏插入圖片描述

9、查看vue是否安裝成功:

vue list

在這裏插入圖片描述

10、創建vue項目:

#xuanvuetest是項目名稱 可以自行更改 這一步可能會很慢,耐心等待,如果過長,則退出重新運行
vue init webpack xuanvuetest

在這裏插入圖片描述
在這裏插入圖片描述

11、啓動vue項目(注意切換到你創建的vue項目的文件目錄下):

#啓動項目 注意切換到你項目的文件目錄下
npm  run dev
#關閉請ctrl+c

在這裏插入圖片描述

12、打開圖中地址:

http://localhost:8080

在這裏插入圖片描述

13、推薦使用Visual Stodio Code 管理Vue項目:

在這裏插入圖片描述
在這裏插入圖片描述

14、遇到困難可以評論(有信必回)小軒微信17382121839

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