iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 25
0
自我挑戰組

前端新手筆記-Vue.js系列 第 25

Day 25 Vue CLI3介紹(含GUI介面介紹)

前言

延續昨天的話題,我們今天來介紹Vue ClI3建立的方法與檔案結構說明,並同時介紹一下CL3中很大的特色:GUI圖形化介面。

Vue CLI3特色

1.完整GUI介面(有介面用就是爽)
2.可以將Ts、SASS等工具用套件方式載入Webpack主體,編譯出來
3.可以直接編譯.vue檔案

安裝Vue Cli3

參考資料:Vue Cli3官網
Step1.sudo npm install -g @vue/cli --unsafe-perm
補充說明:

  • Mac 安裝全域工具時 (-g),建議額外加上 sudo 在前方
  • 改用上面與法主要原因,創建專案時:vue create hello-world會發生錯誤
    參考資料:error during install of vue-cli
  • 安裝Vue CLI 需要 Node.js 8.9以上版本

Step1.2:
我們可以透過vue —V
確認版本是否安裝成功。目前安裝的是Vue ClI v3.11.0

Step2.創建專案目錄
vue create hello-world
https://ithelp.ithome.com.tw/upload/images/20191010/20114645ufOvFwtjdn.png
接著會跳出
https://ithelp.ithome.com.tw/upload/images/20191010/20114645MUeWuPgzgJ.png
再下來會跳出
https://ithelp.ithome.com.tw/upload/images/20191010/20114645NKFXPYNpaP.png
再來會請你選擇Scss版本:
請選擇node-sass
https://ithelp.ithome.com.tw/upload/images/20191010/20114645fa2tuJAXhU.png
終於到最後一頁(內容說明:參考資料
https://ithelp.ithome.com.tw/upload/images/20191010/20114645mcZOnUDl7I.png

Step3.畫面顯示
https://ithelp.ithome.com.tw/upload/images/20191010/20114645E4LY9KshaL.png
最後測試網頁是否正常:
輸入http://localhost:8080/。畫面呈現如下
https://ithelp.ithome.com.tw/upload/images/20191010/20114645mE1JKFwT0o.png

補充:共用Vue Cli2

參考資料:
全局安裝Vue cli3 和繼續使用Vue-cli2.x
Vue Cli2參考資料
依照上面步驟,我們已經將Vue CLI3安裝完成,這時候我們如果想要使用過去CLI樣板功能,我們可以使用下面指令:
1.sudo install -g @vue/cli-init
2.接著,創建專案vue init webpack my_project
例如:vue init webpack vue-cli2-demo

問題整理

Q:安裝完後,我有個疑問點,就是之後使用指令時候,是否要使用VueCLI3 指令?如:npm run serve還是Vue Cl2版本指令npm run dev
備註:我從終端機看Vue-V 顯示的還是3.11.0版本
A:我們要先知道 Vue 2, 3 分為全域區域
全域的是指令工具,像是 vue init, vue ui …
區域的是執行環境,ex:dev, serve
而執行環境的指令在 package.json 內可以找到
所以這兩者是沒有關聯性,因此可以共用,而vue -v 這是全域的指令工具版本,並非區域的執行環境

資料結構說明

這是安裝完Vue CLI3後,打開Vscode畫面
https://ithelp.ithome.com.tw/upload/images/20191010/20114645boKyLFPREA.png
再次提醒:src資料夾中內容都會被編譯!
最後,我們可以在終端機指令下:
npm run build 將資料夾打包就可以瞜

Vue GUI介面介紹

首先,切換到指定資料夾下 輸入vue ui指令
https://ithelp.ithome.com.tw/upload/images/20191010/20114645xiOn8z2lfl.png
開啟畫面會長這樣,我們先create一個專案
https://ithelp.ithome.com.tw/upload/images/20191010/20114645SOomLdj8lw.png
接著建立專案過程就像上面安裝Vue Cli3一樣,我這邊就不多贅述
完成後,畫面呈現如下圖
https://ithelp.ithome.com.tw/upload/images/20191010/20114645kJRU9aMlP9.png

安裝Plugin

我們這邊以安裝Vue Router為例
https://ithelp.ithome.com.tw/upload/images/20191010/20114645DVlBRdg8wd.png
如何確認是否有成功安裝?
檔案中會出現router字樣
https://ithelp.ithome.com.tw/upload/images/20191010/201146454qT9cMSTYL.png

修改Config

我們最常調整公開路徑這塊
像是我們將Vue作業放置GitHub-pages下時,就需要調整路經摟~
https://ithelp.ithome.com.tw/upload/images/20191010/201146455WZ4njbAPM.png

示範:更改後的根目錄
https://ithelp.ithome.com.tw/upload/images/20191010/2011464547O1drHW7G.png

參考資料


上一篇
Day24 Vue CLI2與Webpack介紹
下一篇
Day 26 Vue-router簡介
系列文
前端新手筆記-Vue.js30

尚未有邦友留言

立即登入留言