iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 20
0
自我挑戰組

Vue 學習筆記 - 讓你30天掌握 Vue系列 第 20

Day 20 : Vue-cli 建立開發環境與新增專案

  • 分享至 

  • xImage
  •  

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 的網址,如果有看到下面的頁面,
就代表成功囉!

https://ithelp.ithome.com.tw/upload/images/20181018/201115892DvDT5IxcQ.png

那麼,明天再見囉!


上一篇
Day 19 : Transition 漸變
下一篇
補充: Vue-cli 2
系列文
Vue 學習筆記 - 讓你30天掌握 Vue31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言