在進行開發的時候，我們常常會下載各式各樣的library，如果我們沒有一個工具來幫助我們維護這些套件的版號、相依性，一旦套件的數量變多，會變得更難進行維護。

因此Package Manager變應運而生，不過Packager Manager酸是一種通用型的概念，意旨幫助我們進行套件維護，所以像是Python的pip、C#的nuget、Jave的maven，以及今天的主角npm都是屬於package manager。

而甚麼是npm呢?

NPM 是 Node Package Manager 的簡稱，它是一個線上套件庫，可以下載各式各樣的 Javascript 套件來使用。
載點如下:
https://www.npmjs.com/

記得npm要搭配node一起服用，下載完後，我們把npm加入環境變數之後，便可以來測試看看是否成功。

當有出現板號時代表安裝成功了!
如果要下載新的套件，就只要使用npm install xxx(套件名)就會開始下載。

有了對npm的基本概念後，那甚麼是vue cli呢?
Vue CLI (Vue.js Command-Line Interface)是由 Vue.js 核心團隊所開發，用來提供開發者快速建置 Vue.js 專案並整合相關工具的一套命令列 (command-line) 工具。它的特色是提供開發者在短短的幾分鐘時間內，即可快速建置一個立即可用的 Vue.js (含 2.x/3.x) 示範專案，這個專案同時也內建了 Hot-Reload、ES Lint 與 dev-Server 等功能。
除此之外呢，Vue CLI 整合了 webpack 和 webpack-dev-server，用來快速的打包專案，讓開發者可以快速建置一套立即可用的開發環境。

要怎麼安裝呢?

npm install -g @vue/cli

透過 Vue CLI 建立專案的方式非常簡單，開啟 Terminal 終端機後輸入：

vue create [專案名稱]

下完指令後，會詢問你想裝那些套件進入你的專案中。

等一切都搞定之後，我們就可以直接下以下命令run起Service。

npm run serve

看到上面那張圖的話代表執行成功了。

Hi, I am Grant.

個人部落格 - https://grantliblog.wordpress.com/
個人網站 - https://grantli-website.netlify.app/#/mainpage
我的寫作專題 - https://vocus.cc/user/5af2e9b5fd89780001822db4#