iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
0
自我挑戰組

每天來點 Vue.js 吧系列 第 3

工欲善其事,必先利其器 ⚙︎ Vue 開發環境建置

tags: Vuejs

如何開始使用 Vue ✐

Vue 一共提供三種不同的方式可供我們使用,依照使用情境的不同可以選擇不同的方式。

方法 適合場景
使用 <script src="..."></script> 引入下載好的安裝包、CDN 適合製作 prototype、學習、或者是在既有的小型專案中引入
使用 npmyarn 安裝使用 適合建立中型的專案,能有效地和 webpack 模塊打包配合
使用 Vue 官方提供的 CLI 腳手架構建 適用 快速 建立中型的專案,可以快速運行專案以及使用 Lint 驗證。

1. 使用 <script src="..."> 引入 ✐

使用此方法可以使用 Vue 官網 所提供的安裝包下載後使用,或者自 unpkgcdnjs 上獲取資源。

unpkg 資源:

unpkg 是一個內容源自 npm 的全球快速 CDN,能通過 URL 以快速而簡單的方式提供任意包、任意文件。

<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>

cdnjs 資源:

cdnjs 是一項免費的開源 CDN 服務,由 Cloudflare 支持。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js"></script>

接著便可以開始使用 Vue 了 ~ 在 production version 中建議標注版本號 x.x.xx,以免發生非預期錯誤。

下圖為引入時要注意的版本及檔案細節:

  • 紅色 部分表示引用版本,若不標註,版本一律為最新發布版本。
  • 綠色 的部分指的是引入的 Vue 檔案是否有壓縮(.esm 代表 module),在初學、開發時請注意 vue.min.js 的壓縮版本刪除了警告,建議使用 vue.js 版本,相信筆者,警告是美好的 XD。

2. 使用 npmyarn 安裝使用 ✐

使用 npmyarn 安裝,適合構建中型專案,依據使用習慣採用 npmyarn 安裝皆可,請在 terminal 中輸入以下內容使用:

使用 npm

npm install vue

使用 yarn

yarn add vue

3. 使用 Vue CLI(Command-Line Interface)✐

什麼是 CLI?

在介紹這個方法前,先簡單提及 CLI 全名為 Command-Line Interface 中文為 命令行介面,是一個以純文字為指令的介面,平常使用的終端機(terminal)便是讓我們使用 CLI 的介面;與之相反的是圖形化介面或稱圖形使用者介面(GUI, Graphical User Interface),代表採用圖形方式顯示的介面,例如桌面便是一種常見的 GUI。

經貼心小夥伴指正並討論,得出 terminalCLI 並不相同,有興趣可以閱讀該篇文章深入理解 命令行界面 (CLI)、终端 (Terminal)、Shell、TTY,这些都是啥意思?

Vue CLI

看完了 CLI,那麼 Vue CLI 又是什麼呢? Vue CLI 是一個 全局 安裝的 npm 包,提供終端機(terminal)有關 vue 的指令,幫助開發人員快速搭建專案,終端機要先知道 vue xxx 的意思,用戶輸入時才能幫你正確的執行任務,例如:輸入 vue create [xxx專案名稱],終端機便知道你要建立新的 Vue 專案了,於是開始工作,最終便生成開發者所需的新項目。

以官網的一句話總結, Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統。

使用 Vue CLI,需要先進行 Vue CLI 的全局 global 安裝,請先在終端機中輸入以下指令:

使用 npm

npm install -g @vue/cli

使用 yarn

yarn global add @vue/cli

接著,便可以接著在終端機(terminal)中使用以下指令快速生成一個專案!✸

vue create [你心水的專案名字]

安裝 Vue Devtool 幫助錯誤調試 ✐

Vue 有一套官方的錯誤調試工具 Vue Devtool,允許我們在更友好的介面中調適錯誤,在此可依照需求分別安裝 ChromeFirefox 的版本,在學習前請記得安裝,會有效的提升開發速率。該版本也有提供黑暗模式,眼睛和我一樣有些畏光的捧油可以使用黑暗模式保護目啾。✦

screenshot

結語 ✐

以上為本章內容,介紹了三種開始使用 Vue 的姿勢,建議初學時可以自 <script src="..."></script> 開始使用,官網不建議直接使用 Vue CLI 學習,該工具假定用户對 Node.js 和 webpack 有一定程度的了解,使用上要記得這件事。

話說筆者好像把前幾章節拆得太細,內容有些鬆散,後續的章節會試著調整(笑),我們明天見~。


若是文中有任何錯誤、錯字、想討論的內容,歡迎各位大大不吝鞭笞指正、交流分享,筆者不慎感激 ✦ ✦ ✦

▶︎ 筆者 github:https://github.com/YUN-RU-TSENG
▶︎ 老王賣瓜之筆者另一篇鐵人:每天來點 CSS Specification

▶︎ 倘若不斷向深處扎根,似乎就能茁壯成長 - RM


資料來源

  1. Vuejs.org
  2. Vue CLI
  3. MDN Getting started with Vue
  4. WIKI CLI
  5. unpkg 是什麼
  6. cdnjs

上一篇
Vue 原來是法語? Vue 的超簡短歷史介紹
下一篇
一切的基礎:Vue instance
系列文
每天來點 Vue.js 吧30

尚未有邦友留言

立即登入留言