iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
自我挑戰組

Vue.js 從零開始系列 第 27

Vue.js 從零開始:Vue CLI 介紹與安裝

為什麼要使用Vue CLI

  1. 開發環境複雜,透過Vue CLI整合環境,減少整合的時間。
  2. 套件使用過多,方便管理。
  3. 前後端分離為主流,SPA更符合開發。

Vue CLI是什麼

  1. Webpack為底層,幫開發者建置好開發環境。
  2. 可以用多種第三方套件。
  3. 可運行SassBebal...等編輯工具。
  4. 獨立的.Vue檔案,包含<template><script><style>

Webpack 做了哪些事情

https://ithelp.ithome.com.tw/upload/images/20211006/20118347SSWdPKyJLJ.png

Webpack是個整合工具可以運行各種環境,例如:Sass(CSS預處理器)BABEL(JavaScript編譯器)ESlint(程式碼檢視工具),開發過程中產生的Sass檔案、JavaScript檔案、Vue檔案,再由Webpack產生出能運行的HTMLCSSJs檔案。

並且整合以下開發環境:

1.編譯各種語言,編譯後可以在各種瀏覽器運行,例如:ES6、ES7、TypeScipt、Sass...等。
2.程式碼品質檢視,確保程式碼的一致性。
3..Vue檔案,開發Vue元件更為方便。


Vue CLI的安裝的前置準備

開始安裝Vue CLI之前請先安裝Node.js

https://ithelp.ithome.com.tw/upload/images/20211006/20118347EKgjht8dpR.png

照著官網的指示做,安裝完成之後,開啟終端機輸入指令:

node -v
npm -v

安裝Node.js的同時NPM也會隨著安裝,如果有出現版本號碼就代表安裝成功。

創建第一個Vue CLI專案


vue create [專案名稱]

接著到這個畫面:
https://ithelp.ithome.com.tw/upload/images/20211006/20118347tXRjvjkLZH.png

Vue.CLI詢問你是否安裝Vue2Vue3手動安裝

直接選擇Vue2Vue3會缺少VueXVue-router..等套件。

當想返回上一步可以按control+c

這邊選擇Manually select features,之後到新畫面:
https://ithelp.ithome.com.tw/upload/images/20211006/201183473m1GEk6dZ5.png
項目說明:

  • choose Vue version:可以選擇Vue的版本。
  • Babel:編譯ES6ES7...給大部分瀏覽器可以運行的JavaScript
  • Progressive Web App (PWA) Support:需要開發PWA可選擇。
  • Router:路由器。
  • Vuex:狀態管理模式。
  • CSS Pre-processors:CSS預處理器。
  • Linter / Formatter:檢視程式碼品質的工具。

使用空白鍵來做選擇

這邊可以依照自己的需求來選擇,之後按下確認,跳出畫面:

https://ithelp.ithome.com.tw/upload/images/20211006/20118347ChJb6I7LrI.png

看自己要選擇Vue2.x或是Vue3.x的版本,確認之後:
https://ithelp.ithome.com.tw/upload/images/20211006/20118347Sud8clsm8u.png

選擇自己的CSS預處理器的版本,這邊我們選擇Sass/SCSS (with node-sass),按下確認之後:
https://ithelp.ithome.com.tw/upload/images/20211006/201183477dMEf3hj72.png

可依照自己的程度選擇下面兩種:

  1. ESlint + Airbnb config
  2. ESlint + Standard config

第一種比第二種模式較為嚴謹有把握可做選擇,這邊我們選第一種,按下確認之後:
https://ithelp.ithome.com.tw/upload/images/20211006/201183478X8QkovRXI.png
Vue CLI詢問什麼時候進行ESlint的檢視,選擇第一個存擋就檢視,確認之後:
https://ithelp.ithome.com.tw/upload/images/20211006/201183470Paojr13Kr.png
要選擇分開檔案或是獨立檔案,可依照自己的需求,這邊選擇第一個分開檔案:
https://ithelp.ithome.com.tw/upload/images/20211006/20118347K86luOEQFD.png
之後選擇Vue Router的形式要哪一種,如果選擇Yserver也要進行調整,所以這邊一律選擇N

設定到最後會在詢問你是否要儲存所有設定,看個人需求,這邊選擇N
https://ithelp.ithome.com.tw/upload/images/20211006/20118347flgXOm4Gca.png


啟動你的Vue.CLI

依照上面步驟完成之後,會自動安裝,之後跳出這個畫面:
https://ithelp.ithome.com.tw/upload/images/20211006/20118347DULCgckzis.png

恭喜你完成以上安裝了,再來把資料夾放到vscode並開啟終端機(control+`),執行以下指令

npm run serve

終端機畫面:
https://ithelp.ithome.com.tw/upload/images/20211006/20118347ydDQ6FWQKI.png

點擊網址就會跳出畫面:
https://ithelp.ithome.com.tw/upload/images/20211006/20118347bB1fEqtK01.png

代表安裝以及啟動都順利完成

/images/emoticon/emoticon12.gif


參考資料

六角學院
重新認識 Vue.js


上一篇
Vue.js 從零開始:provide / inject
下一篇
Vue.js 從零開始:Vue CLI 環境說明
系列文
Vue.js 從零開始30

尚未有邦友留言

立即登入留言