建立 Vue Cli 3 專案的設定介紹

  • 日期:
  • 留言數:0
  • 標籤:

Vue Cli 可以快速幫 Vue 建立一個完整的系統,但每次建立都有一些設定要調整,為了怕自己忘記,所以簡單將設定紀錄一下~

設定範例圖

如果有人被 google 搜尋騙進來,可以先看一下這篇文章講的東西是不是你想知道的!

▼ 我要分享的是這個設定而已 XD


vue create 建立專案後,會出現以下的設定:

Please pick a preset

第一個是讓你選擇專案的環境配置:

  • default(babel, eslint): 預設的新專案原型,沒有任何 npm,選擇之後會直接幫你建立專案,後面的都可以略過了 XD。
  • Manually select features: 如果希望全部設定都自己手動選擇,就請選這個吧。

如果在建立專案時有儲存設定,未來建新專案時可以在這裡選擇過往的設定,要如何「儲存設定」?這個部分會在後面提到。

Check the features needed for your project

接著選擇在這個專案中會用到的功能,用space多選。

  • Babel: JavaScript 轉碼器,可以將 ES6 的程式碼轉為 ES5
  • TypeSript: TypeScript 用來補足 JavaScript 在型別上的不足,他有可選的靜態型別,以及支援最新的 ES6 特性
  • Progressive Web App (PWA) Support: 是否支援漸進式網頁應用 (PWA)
  • Router: Vue 的路由器,可以參考 vue-router
  • Vuex: Vue 的狀態管理模式,可以參考 vuex
  • CSS Pre-processors: CSS 的預處理器,例如 Less, Sass
  • Linter / Formatter: 檢查 Coding Style 與格式化,例如 ESlint
  • Unit Testing: 單元測試
  • E2E Testing: End to End 測試

想要更瞭解單元測試與 E2E 測試的朋友,可以參考保哥的文章介紹:一次搞懂單元測試、整合測試、端對端測試之間的差異

承上,選好功能後,部分的功能會再詢問更細部的設定。

如果你選了 TypeScript

  • Use class-style component syntax: 是否要使用 style component 的語法
  • Use Babel alongside TypeScript: 是否要用 Babel 轉譯

如果你選了 Router

如果你選了 CSS Pre-processors

  • Pick a CSS pre-processor: 選擇你要用的 CSS 預處理器

如果你選了 Linter / Formatter

  • Pick a linter / formatter config: 選擇 Coding Style 的規範類型。
  • Pick additional lint features: 檢查 Coding Style 時,是要在存檔時檢查?還是 commit 時直接處理?

如果你選了 Unit /E2E Testing

  • Pick a unit testing solution: 選擇單元測試的測試方法
  • Pick a E2E testing solution: 選擇 E2E 測試的測試方法
  • Where do you prefer placing config for Babel, PostCSS, ESLint, etc.: 選擇 Babel, PosCSS, ESLint… 等這些設定檔的存放位置

最後一個選項,則是問你要不要保留以上的設定,下次如果要新建一個 Vue Cli 時,就可以直接拿來使用。

CSS Grid 語法筆記

這篇不算教學,只是將 CSS Grid 的語法做個紀錄,所以沒有前言,也不會介紹 CSS Grid 是什麼。如果你已經知道 CSS Grid 的作用,也歡迎參考以下筆記,也許可以幫助你更了解相關語法。

從 Gird 開始

前置作業:將 div 的 display 設為 grid,接著定義 Grid 的寬度(columns)與間距(gap)

HTML
CSS

grid-column-gap 以及 grid-row-gap 可以合併為 grid-gap

CSS

▼ 網頁示意圖

假使要設定 CSS Grid 的高度,可以再加上:

CSS

▼ 網頁示意圖

在這個範例中,row 有 4 行,可是我們只設定了 1 & 2 行,沒有設定高度的會以元素高度為高度(auto-height)。

☞ 可以用grid-auto-rows設定 auto-height 的最小高度。

☞ 注意

  • 沒有grid-auto-columns這種語法。
  • 沒有grid-auto這種簡寫。

新的單位:fr

fr 是因應 CSS Grid 而產生的新單位,全名是 fraction (分數),這個分數不是 score 那個分數,而是數學分子 + 分母的那個分數。

我們可以用 fr 去設定 CSS Grid 的相對寬度,以達到 RWD 的縮放效果。如果是跟前面範例一樣使用px,縮放的時候是不會有 RWD 的(這大家應該都很清楚了)

grid-template-columns 的單位改掉:

CSS
  • 編號 1,4,7,10:占 1/4
  • 編號 2,5,8:占 2/4
  • 編號 3,6,9:占 1/4

▼ 網頁示意圖

這時候縮放就會有 RWD 效果囉~。

另外也可以混搭單位:

CSS

重覆 Grid 的設定

如果 Grid 的寬度有一個固定的模式,可以用 repeat() 這個語法把它們合併,類似迴圈的感覺。

假設原本這樣寫:

CSS

可以看出來三個為一組,1fr 2fr 2fr是一直重覆的,所以改寫如下:

CSS

▼ 網頁示意圖

最左邊跟最右邊的 Grid 如果不會重覆,可以接在repeat的前後:

CSS

Grid 的排序

使用 grid-auto-flow 進行 Grid 的排序,預設屬性為 row (橫向排列)。

如果改用 column,Grid 就會變成縱向排列 (可以注意數字編號):

CSS

▼ 網頁示意圖

此外也可以指定某一個div進行排序

CSS

如果沒有指定order的順序,預設就是order: 0,而我們現在指定第三個 div 為order: 1,所以第三個 div 的排序會跑到最後面。

☞ 承上,現在是縱向排列,所以 div 排列的順序是用「縱向」來看的喔。

▼ 網頁示意圖

接下來就可以用order:N任意調整排序囉!

CSS

▼ 網頁示意圖

以上就是 Grid 的相關筆記。

部落格改版之後,是用 Grid + Flexbox 來排版的,有興趣的朋友可以自行扒皮 XD

利用 SVN 更新 WordPress 外掛

這篇純粹是一個小筆記,因為久久才會用到一次 SVN,然後每次都要去 WordPress 官方查資料真的覺得很麻煩,所以決定把指令記錄在部落格里。

更新外掛

⚒ cd Folder 後,輸入 svn up

Shell

⚒ 接著輸入 svn stat 確認哪些檔案需要 add 或 modify

Shell

⚒ 最後就是輸入 commit 的文字啦

Shell

以上是更新的步驟。

更新版本號

接下來還要將版本號更新到 WordPress 上面,讓大家可以後台收到通知,並自動更新外掛:

⚒ 先將 trunk 的檔案複製到版本號裡面

Shell

⚒ 接下來發送 commit 訊息即可

Shell

正常來說,做完這些步驟再回到官網重新整理就能看到成果了。

將檔案快速 push 到 gh-pages branch

github 提供一個簡易的環境可以執行 HTML/CSS/JS 等前端程式,使用方法很簡單,只要把在 repo 新增一個gh-pages分支,然後將檔案 push 到該分支即可。

但用 sourcetree 切換 branch,檔案也會隨之改變,並不是個好方法。也許用 sourcetree 有其他的解法,但目前我研究不出來,所以我目前的做法是用npm套件去管理。

gh-pages 套件介紹

這個套件就叫做 gh-pages,可以直接在 cmd 執行以安裝 (當然前提是要先安裝 npm 套件管理):

Shell

套件頁面有詳細的文件說明,會告訴你如何做更多進階的設定。

但我要的功能很簡單,只希望把當前 branch 的檔案 push 到gh-pages即可,因此請在 Terminal 輸入該指令即可 (最後面可以輸入資料夾位置):

Shell

這個原理很簡單,就是先把你要的檔案抓下來,再移除gh-pages裡的檔案,最後再上傳。也因此這些動作都需要輸入 github 的帳號密碼,最少可能要輸入三次,為了避免這種情況,我們必須要修改 config,將你的 repo 位置從http://改為git@

修改 config 檔案

請在 Terminal 利用 vim 或任一編輯器打開 config (該檔案為隱藏檔)

Shell

[remote "origin"]裡面有一個url,將它的路徑改為git@開頭的 repo 位置即可。

最後存檔再試著執行gh-pages -d .,就會發現不用再輸入密碼了唷!

codyhouse 的 tooltip 線上教學筆記與心得

剛剛收到一封 codyhouse 的線上課程通知,這一期他們推廣的是 CSS animation 應用,好奇點進去後發現有一堂課程是免費的,所以就打開來聽聽看啦 ~

▼ 有 play 可以選的 tooltip 就是這期的免費課程啦

花了半小時聽完後覺得受益良多,雖然講者的口音有點重,但可以把影片字幕打開,也可以直接看程式碼,聽完之後也是對其他付費課程有所心動 XD,非常棒的行銷手法呢,先試聽一堂課喜歡再買 😀

因為他的 youtube 影片連結是公開的,所以我也放一份在我的 blog 裡面,以下是自己聽完做的一些筆記跟重點,很多語法我自己也已實作了,所以看到國外講師也是這樣寫覺得很開心 😊

總之我覺得不錯的語法都會重點摘錄出來給大家參考,希望對你們有所幫助 🌹

筆記與心得

  • aria-hidden:HTML5 語意,用於屏幕閱讀器的,幫助殘障人士更好的訪問網站。(參考來源)
  • 萬年水平垂直置中的另一種方法:
CSS
  • 文字如果要垂直置中,可以將height以及line-height設定成一樣的高度,但文字必須維持一行才有用。
  • 如果不希望hover影響隱藏的元素,可以改用visibility: hidden將元素隱藏,這樣滑鼠移過之後也不會啟動hover效果
  • visibility可以用在transition,但display不行
  • 假設元素的寬度是50px可以善用calc(50% - 25px)將元素置中
  • 利用偽元素製作三角形:
CSS

偶爾聽聽外國人的線上課程也很棒,可以學到很多不一樣的寫法以及詮釋的方法,codyhouse 的範例跟教學品質都很棒,有興趣可以連回他們的網站看更多資料唷: https://codyhouse.co/

讓 Facebook 社交小工具(Page Plugin)能有 RWD 的效果


Facebook 的 Page Plugin (原先的 like box)預設沒有提供 RWD 的效果,如果希望小工具也可以用 RWD 效果的話,可以在 CSS 加入以下程式碼:

CSS

語法來源:http://stackoverflow.com/questions/10656038/how-to-make-the-facebook-like-box-responsive