Mac 下 vue 開發環境的搭建以及專案建立

HuDu發表於2020-07-08
MacVue開發環境

開始

首先來了解一下，Vue的整體開發環境。

  • Homebrew：Mac 系統下的包管理器，類似於 Linux 下的 apt-get，Windows 的控制皮膚-安裝刪除程式
  • Node.js：JavaScript 執行環境（runtime），不同系統之間不能直接執行各種程式語言，Runtime 類似於各國會議上的同聲傳譯
  • npm：Nodejs 下的包管理器，類似於 Mac 下的 Homebrew
  • webpack：Vue 的元件都是通過 .vue或者像微信小程式的.wxml和.wcss等自定義的元件都無法被使用者通過各種瀏覽器解析，需要被翻譯打包成 js 檔案
  • vue-cli：用來生成模版的 Vue 工程，相當於按照設計好的圖紙來蓋房子

安裝 nodejs

$ brew install nodejs

安裝 npm

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

安裝 webpack

$ cnpm install webpack -g

安裝 vue 腳手架

$ sudo npm install -g vue-cli

檢查是否安裝成功

$ vue list

建立 vue 專案

找一個資料夾放工程用的目錄

$ cd 目錄路徑

根據模板建立專案

$ vue init webpack 專案名
#如下
$ vue init webpack demo1

$ cd demo1

安裝專案依賴

$ npm install

發現目錄下多了 node_modules 資料夾。
Mac 下 vue 開發環境的搭建以及專案建立

安裝 vue 路由模組vue-router和網路請求模組vue-resource

$ cnpm install vue-router vue-resource --save

啟動專案

$ npm run dev
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章