如何在mac上運行vue項目


使用終端安裝Vue運行環境
 

1、安裝 Homebrew

Homebrew 是osx下面最優秀的包管理工具,沒有之一。先在終端查看是否已安裝brew

brew -v

如果返回 Homebrew 的版本號 例如:Homebrew 1.3.6 那么恭喜你,可以跳過這一步,如果沒有,那就乖乖執行第一步。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

2、安裝 node.js

為了避免使用brew命令經常出錯的情況,所以采用手動安裝 

下載地址:https://nodejs.org/en/download/     (選擇mac os)

確認node是否安裝成功。

node -v 

 

3、 獲取nodejs模塊安裝目錄訪問權限 (必須執行)

sudo chmod -777 /usr/local/lib/node_modules/

 

4、安裝 淘寶鏡像 (cnpm)

ps: Node 的模塊管理器 npm 會一起安裝好,不需要另外安裝,查看npm的版本

npm -v

如果版本太低,小於4.0,請執行下面命令升級(vue-cli需要npm版本大於4.0)

npm install -g npm

Node 的官方模塊倉庫網速太慢,用下面的命令替代上面的

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

 

5、安裝webpack

sudo cnpm install webpack -g

這里需要注意一點使用上面語法,執行npm run dev 報錯! MAC電腦出現 .bin/webpack-dev-server permission denied 提示權限問題,為了避免出現這個問題可以采取下面語法:

sudo cnpm install webpack-dev-server -g 

 

6、安裝vue腳手架 vue-cli

選擇全局安裝(npm下載速度超級慢,目前cnpm已經成功替代npm)

sudo cnpm install -g vue-cli

安裝成功后,vue命令查看

使用vue list查看vue的模板

  

7、在硬盤上找一個文件夾放工程用的,在終端中進入該目錄

cd 目錄路徑

 

8、創建一個vue.js工程(項目)

vue init webpack(使用哪個模板?可以百度查看) 項目名稱 (項目名稱不能用中文)

過程中需要填寫一些信息,項目名稱、項目描述、是否需要安裝vue-router、是否使用ESLint即新的js語法標准,檢測你的代碼。由於只是測試項目,unit test單元測試和ese tests 在這里都選了no 

 

9、安裝項目依賴

一定要從官方倉庫安裝,npm 服務器在國外所以這一步安裝速度會很慢。

npm install  (會非常慢)

cnpm install  

進入項目,查看當前目錄結構

node_modules是安裝依賴成功后新增的一個目錄 

 

10、安裝 vue 路由模塊vue-router和網絡請求模塊vue-resource

cnpm install vue-router vue-resource --save

 

11、啟動項目

npm run dev

cnpm run dev

項目啟動成功后,命令行會給出在瀏覽器中查看項目效果的地址

ep: > Listening at http://localhost:8080 (或其它端口)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM