iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
0
Modern Web

用Vue實作一個LINE@聊天機器人後台系列 第 2

[Day02] 使用Vue Cli工具建立前端專案

  • 分享至 

  • xImage
  •  

本篇的內容包含

  • 如何安裝Node.js
  • 如何安裝Visual Studio Code
  • 如何透過npm安裝Vue Cli
  • 如何透過Vue Cli設定,產出專案框架

Vue Cli簡介

Vue Cli是一個Vue官方所推出、基於Vue.js的專案建立工具,
可以透過簡單的設定,產出一包基本的Vue專案。
其中主要包含幾個npm套件:

  • @vue/cli:是一個安裝於全域的npm套件,提供終端機中的vue指令
  • @vue/cli-service:cli服務框架,會部分安裝在每個Vue Cli的專案中。在開發環境需要依賴此框架協助我們處理有關WebPack等等部分。

事前準備

安裝Node.js

Vue Cli需要搭配Node.js 8.9 以上的版本(官方推薦8.11.0以上為最佳),
可以直接前往官網下載

Node.js官方網站
這邊可以選擇左邊的按鈕,10.16.3LTS(Recommended For Most Users,推薦給大多數用戶使用的版本)版本。

  • 如果已經安裝過Node,卻不確定版本的話,可以透過本篇文章確認安裝狀態段落提供的指令進行版本確認。

下載完成後,可以直接透過精靈進行安裝
Node.js安裝畫面
預設的路徑是C:\Program Files\nodejs\,基本上都按照預設的設定逐步執行即可。

確認安裝狀態

為了確定安裝是否有成功,可以打開命令提示字元來確認安裝狀態。

node --version

輸入以上指令,就會顯示出Node的版本,表示安裝成功。
命令提示字元顯示出Node.js的版本

延伸閱讀:nvm-幫助你在同一台電腦上,管理不同版本Node.js的工具
nvm GitHub

安裝Visual Studio Code

Visual Studio Code是微軟推出的跨平台程式碼編輯器,
可以在官網下載
Visual Studio Code安裝程式
基本上按照預設的設定安裝即可。

使用Node安裝Vue Cli

開啟Visual Studio Code,可以透過熱鍵ctrl,或者從檢視>終端機選單中叫出終端機
Visual Studio Code介面
透過以下指令可以全域安裝@vue/cli套件(目前安裝版本:3.9.2)

npm install -g @vue/cli

安裝完成後,可以透過以下指令檢查安裝是否成功,

vue --version

若是有安裝成功,會出現Vue Cli的版本號
終端機輸入指令的畫面

使用Vue Cli建立一個專案

移至想存放專案的目錄

一樣切換到終端機,使用cd指令可以切換至想用來存放Vue專案的目錄

cd C:\Users\使用者名稱\Documents

如果原本沒有適合的目錄,可以用mkdir新增一個資料夾,再用cd指令移至該目錄

mkdir vue_projects
cd vue_projects

建立一個專案

輸入以下指令,可以用來建立一個名為line_system的Vue Cli專案

vue create line_system

輸入後會出現Cli的設定選單:
Vue Cli設定選單

  • usually (vue-router, vuex, dart-sass, babel, eslint):常用的設定,可以自己客制自己的常用Cli設定組合
  • default (babel, eslint):官方推薦的預設設定
  • Manually select features:手動選擇需要的項目

用鍵盤上下移動選擇選項,選擇第三項Manually select features後,按下Enter來進入手動設定模式
(*)表示包含的設定,這邊的選擇方法是,移到需要的項目後按空白鍵選取
Vue Cli手動設定模式選單_選擇後
這邊選了幾個項目:

  • Babel:搭配WebPack,用來將較新的JS語法編譯成目前支援度較高的ECMAScript 5(ES5)的工具
  • Router:Vue路由管理器
  • Vuex:Vue的狀態(資料)管理工具
  • CSS Pre-proccessors:讓工程師可以用具有程式語言優點(如變數、function)的方式撰寫CSS的原始碼,最後會編譯成一般的CSS
  • Linter / Formatter:檢查語法錯誤及程式碼排版是否符合設定的規範的工具

另一個選擇-圖形化建立專案的介面


上一篇
[Day01] 在這30天內想要完成的目標
下一篇
[Day03] 在Vue Cli專案加入Element UI套件
系列文
用Vue實作一個LINE@聊天機器人後台30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言