基礎介紹基本上就到一個段落,接下來最後的這幾天會介紹一些 Vue 的生態。
首先介紹該如何建立 Vue 的開發環境與新增專案,這裡我們會使用到 vue-cli 來建立,不過在開始使用前,你的電腦必需要有 Node.js 的環境與 NPM ( Node Package Manager ) 套件管理工具,所以我們先來安裝一下 Node.js 與 npm 吧!
Node.js 可以到官網下載,而且目前的版本都有包括 npm 的工具唷!
在使用前先講解一下為什麼要使用 vue-cli。用 vue-cli 可以快速搭建 Vue 的開發環境,並且有以下幾點特性:
首先當你安裝好 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 的網址,如果有看到下面的頁面,
就代表成功囉!
那麼,明天再見囉!