iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 23
1

本文同步發表於斜槓女紙部落格:Day23 萬丈高樓平地起(6):What is Vue CLI?

Day23 萬丈高樓平地起(6):What is Vue CLI?

嗨~又是我!
挑戰到這兒也快到尾聲,不過到現在還沒作出個可以見人的專案,有股不只要寫超過30天的感覺。

一路寫到今天,我一直都是很暴力的採用CDN的方法來製作整個畫面,但如果持續這樣進展下去,一路coding到底的話,其實就是拿Vue.js來做傳統網頁開發的概念。

這不是肯德基

NO~~~一路發展成網站怪獸不是我要的阿!!!

還記得我在 Day3 工欲善其事,必先利其器:編輯器擴充套件設定+引入Vue.js 曾經提到我們可以利用webpack來管理大型專案嗎?

現在稍稍會了一些Vue.js的皮毛,也該是時候學習如何利用Vue CLI將整個專案打包的時刻了,讓我們開始吧!


What is Vue CLI?

Vue CLI是一個Vue官方所推出、基於Vue.js的專案建立工具,可以透過簡單的設定,產出一包基本的Vue專案。

Vue CLI 特點

  • 基於Webpack建制的開發工具
  • 便於開發SPA的網站(相反的不適合開發非SPA網站)

想知道什麼是SPA的話推薦看看這篇:跟著小明一起搞懂技術名詞:MVC、SPA 與 SSR


事前準備

安裝Node.jsVue CLI需要搭配Node.js 8.9 以上的版本(官方推薦8.11.0以上為最佳)

Node.js

因為我以前有先安裝過Node.js 了,就不另外提供安裝圖,如果有安裝過的記得要先檢查一下Node.js 的版本喔!

  • mac 使用node -v指令檢查(終端器)
  • windows使用node --version指令檢查(命令提示字元)

Node.js版本


使用Vs Code安裝Vue CLI

  1. 開啟終端機,在 Mac 或是 Windows 系統,快捷鍵都是按Ctrl +,或者可以直接從檢視>終端機選單中叫出終端機
    開啟終端機

    可以使用 npm 進行全域安裝@vue/cli套件,這邊安裝需要稍等一下。

    $ npm install -g @vue/cli
    

    或是使用yarn來進行安裝

    $ yarn global add @vue/cli
    
  2. 安裝完成後可以透過下面指令來查看是否安裝成功,若成功則會出現版本號

    vue --version
    

    vue版本


使用Vue Cli建立一個專案

移至想存放專案的目錄

喜歡使用指令的朋友們可以在終端機中,使用cd指令可以切換至想用來存放Vue專案的目錄。或者可以使用我的偷吃步方法。

  1. 先到你要放專案的位置開啟好資料夾,這邊以vue-project為例。
  2. 直接使用Vscode的將資料夾新增至工作區,打開剛剛新增的資料夾。
  3. 在資料夾點選右鍵,選擇在終端機中開啟,這樣一來終端機的路徑就會直接跳到你新增的資料夾中囉!
    資料夾路徑偷吃步

建立Vue CLI專案

  1. 使用vue create 專案名稱的指令來建立專案,如下範例:建立一個名為week006的Vue CLI專案

    vue create week006
    
  2. 輸入後會出現一連串的Vue CLI設定選單,詳細說明如下:

    • 選擇專案設定檔,我這裡選擇手動選擇,當然也可以依據個人需求選擇喔!
      step1

    • ●)表示包含的設定,這邊的選擇方法是,移到需要的項目後按空白鍵選取
      這邊選了幾個項目:

      • Babel:搭配WebPack,用來將較新的JS語法編譯成目前支援度較高的ECMAScript 5(ES5)的工具

      • Router:Vue路由管理器

      • Vuex:Vue的狀態(資料)管理工具

      • CSS Pre-proccessors:讓工程師可以用具有程式語言優點(如變數、function)的方式撰寫CSS的原始碼,最後會編譯成一般的CSS

        step2

    • 詢問Vue Router 是否要使用history模式 (另一種 mode 為 'hash',會在 URL 加上 '#' 符號)
      step3

    • 要使用哪一種CSS處理器
      step4

    • 以上所選擇的所有設定要獨立存檔或是統一存到package,json
      step5


以上都選擇完畢後,命名這份專案設定檔後,繼續一連串的安裝過程,完成後會提示相關的執行指令。
success

同樣將終端機的位置移到設定專案的資料夾後,執行以下指令

npm run serve

等待一段時間後就能看到執行成功的提示囉!
app run

在瀏覽器中輸入localhost位置就能順利看到專案建立成功的畫面了/images/emoticon/emoticon07.gif
Hello Vue

費了一番周折總算順利建置成功,明天來跟大家說說專案內的資料夾架構唷!


參考資料


上一篇
Day22 閒不下來的史萊姆(三):scroll down按鈕實作
下一篇
Day24 萬丈高樓平地起(7):Vue CLI專案檔案結構簡介
系列文
前端史萊姆與Vue的三十天時光冒險30

尚未有邦友留言

立即登入留言