Vue-cli 3 建立開發環境與新增專案

基礎介紹基本上就到一個段落，接下來最後的這幾天會介紹一些 Vue 的生態。
首先介紹該如何建立 Vue 的開發環境與新增專案，這裡我們會使用到 vue-cli 來建立，不過在開始使用前，你的電腦必需要有 Node.js 的環境與 NPM ( Node Package Manager ) 套件管理工具，所以我們先來安裝一下 Node.js 與 npm 吧！
Node.js 可以到官網下載，而且目前的版本都有包括 npm 的工具唷！

什麼是 vue-cli ？

在使用前先講解一下為什麼要使用 vue-cli。用 vue-cli 可以快速搭建 Vue 的開發環境，並且有以下幾點特性：

• 基於 Webpack 所建製的開發工具。
• 可以運行 Sass、Babel 等編譯工具。
• 方便使用各種第三方套件，如：BS、vue-router、vue-axios 等。
• 適合開發單頁應用程式 ( SPA )。

開始建立環境與新增專案

首先當你安裝好 Node.js 之後可以先在終端機輸入下面的指令來查看版本。

$ node -v

搭配官方文件會比較好懂，接下來透過 npm 來安裝 vue-cli。

$ npm install -g vue-cli

在這裡可以輸入 vue 來觀看可以使用的指令，接下來我們來建立一個專案。

//查看指令//
$ vue
//建立專案//
$ vue create [project_name]

資料夾名稱可以自定，所以會是下面這樣。

$ vue create vue-demo

首先可以選擇最基本的 Babel + ESLint 預設選項，或者也可以改選 Manually select features 來設定你需要安裝的部分。這裡我就選擇預設的部份。

安裝完後會提示要你接下來進入資料夾並安裝模組，所以我們接下來要做的是：

//進入專案資料夾//
$ cd vue-demo

到這裡專案已經建立好囉！先給自己一個鼓掌吧！進入資料夾後可以試著運行看看，方法如下：

//本地端運行，開發版本//
$ npm run serve
//需要伺服器//
$ npm run build

運行開發版本後可以進入 http://localhost:8080 的網址，如果有看到下面的頁面，
就代表成功囉！

那麼，明天再見囉！