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

日期：2019.08.14
留言數：0
標籤：vue 筆記

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

Use history mode for router: 是否要開啟 history 模式？
要使用 history 模式需要後端支援，可以參考：https://router.vuejs.org/zh/guide/essentials/history-mode.html

如果你選了 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 語法筆記

日期：2017.10.16
留言數：0
標籤：CSS Grid css 語法 CSS3 筆記

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

從 Gird 開始

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

<div class="grid-box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

.grid-box {
  display: grid; /* 設定 CSS grid 的第一步 */
  grid-template-columns: 100px 100px 100px; /*設定 Grid 的寬度*/
  grid-column-gap: 10px; /* 設定左右間距 */
  grid-row-gap: 20px; /* 設定上下間距 */
}

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

.grid-box {
  grid-gap: 20px 10px;
}

▼ 網頁示意圖

假使要設定 CSS Grid 的高度，可以再加上：

.grid-box {
  grid-template-rows: 100px 200px;
}

▼ 網頁示意圖

在這個範例中，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 的單位改掉：

.grid-box {
  grid-template-columns: 1fr 2fr 1fr;
}

編號 1，4，7，10：占 1/4
編號 2，5，8：占 2/4
編號 3，6，9：占 1/4

▼ 網頁示意圖

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

另外也可以混搭單位：

.grid-box {
  grid-template-columns: 1fr 2fr 100px;
}

重覆 Grid 的設定

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

假設原本這樣寫：

.grid-box {
  grid-template-columns: 1fr 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr;
}

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

.grid-box {
  grid-template-columns: repeat(3, 1fr 2fr 2fr); /*(重覆幾次, 重覆的寬度)*/
}

▼ 網頁示意圖

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

.grid-box {
  grid-template-columns: 10px repeat(2, 1fr 2fr 2fr) 180px;
}

Grid 的排序

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

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

.grid-box {
  grid-auto-flow: column;
}

▼ 網頁示意圖

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

.grid-box div:nth-child(3) {
  order: 1;
}

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

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

▼ 網頁示意圖

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

.grid-box div:nth-child(3) {
  order: 1;
}

.grid-box div:nth-child(9) {
  order: 2;
}

.grid-box div:nth-child(6) {
  order: 3;
}

▼ 網頁示意圖

以上就是 Grid 的相關筆記。

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

利用 SVN 更新 WordPress 外掛

日期：2017.04.15
留言數：0
標籤：WordPress 外掛筆記

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

更新外掛

⚒ cd Folder 後，輸入 svn up

$ cd my-local-dir/
my-local-dir/$ svn up

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

my-local-dir/$ svn stat

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

my-local-dir/$ svn ci -m "commit message"
> Sending    trunk/my-plugin.php
> Transmitting file data .
> Committed revision 11327.

以上是更新的步驟。

更新版本號

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

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

my-local-dir/$ svn cp trunk tags/2.0

⚒ 接下來發送 commit 訊息即可

my-local-dir/$ svn ci -m "tagging version 2.0"

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

將檔案快速 push 到 gh-pages branch

日期：2016.02.28
留言數：0
標籤：git 工具技巧筆記

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

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

gh-pages 套件介紹

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

$ npm install gh-pages -g

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

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

$ gh-pages -d .

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

修改 config 檔案

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

$ vim .git/config

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

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

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

日期：2015.11.12
留言數：0
標籤：css 語法 CSS3 HTML5 筆記觀念課程

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

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

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

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

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

筆記與心得

aria-hidden：HTML5 語意，用於屏幕閱讀器的，幫助殘障人士更好的訪問網站。(參考來源)
萬年水平垂直置中的另一種方法：

section {
  width: 100%;
  height: 100vh;
  display: table;
}
section .center {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

文字如果要垂直置中，可以將height以及line-height設定成一樣的高度，但文字必須維持一行才有用。
如果不希望hover影響隱藏的元素，可以改用visibility: hidden將元素隱藏，這樣滑鼠移過之後也不會啟動hover效果
visibility可以用在transition，但display不行
假設元素的寬度是50px可以善用calc(50% - 25px)將元素置中
利用偽元素製作三角形：

border: 10px solid transparent;
border-top-color: #2e1c28;

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

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

日期：2015.11.04
留言數：2
標籤：css 語法 responsive RWD 技巧筆記

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

/* 
讓 FB 的 Page Plugin 可以有 RWD 的效果
https://developers.facebook.com/docs/plugins/page-plugin
*/

/* 這個元素內嵌在 iframes 裡，有可能造成部分 layout 變形，所以請把它隱藏 */
#fb-root {
    display: none;
}

/* 讓所有容器的寬度都變成 100% */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

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