veraaaaaliu / blog

隨手筆記

請看 issues

blog's Issues

[ env ] .env 設定相關

為了使根目錄乾淨，.env 可以放進 env 的資料夾

如圖的 .env 分為三個，.env 是全部環境共用的 env 檔案，.env.development 是測試機專用的，.env.production 則是正式機，
但其實還可以多個 .env.staging ，是 for 上測試後但還未發正式機的情況，他可能是 beta- 之類的，也會跟正式和測試有區別。

---

只在本地有效的變量 .env.local

有時候你可能有一些不應該提交到程式碼倉庫中的變數。
這種情況下你應該使用一個 .env.local 檔案取而代之。本地環境檔案預設會被忽略，且出現在 .gitignore 中。
.local 也可以加在指定模式的環境檔案上，比如 .env.development.local 將會在 development 模式下被載入，且被 git 忽略。

---

nuxt3 - 1

// nuxt.config.ts
import { resolve } from "path";

const pathResolve = (dir: string) => {
  return resolve(__dirname, dir);
}

export default defineNuxtConfig({
  vite: {
    envDir: pathResolve('./env'),
  },
});

---

nuxt3 - 2

// .env
COOKIE_NAME=__session
COOKIE_SECRET=superdupersecret

// nuxt.config.ts
export default defineNuxtConfig({
   runtimeConfig: {
      cookieName: process.env.COOKIE_NAME || "__session",
      cookieSecret: process.env.COOKIE_SECRET || "secret",
    },
});

[ 工具網站 ] 集合

使用者使用載體 / 瀏覽器習慣

https://gs.statcounter.com/

規則運算式工具 Ai Regex

https://www.airegex.pro/

[ nuxt ] 注意事項整理

1. 安裝套件時，先到這裡搜尋，按照他的安裝去裝，他有 -D 的一定要用，讓他放進 devDependencies，不然會裝多餘的東西。

搜尋套件

使用裡面的方法安裝

2. asyncData 方法是在 server side 處理，要能想到前後負載，如果有些不需要 seo，api 就不需在 server side 求得，局部可以 使用 client side render，讓 server 載入可以更快。
3. [ nuxt3 ]官方有建議 head 部分應該拉過去用 useHead，css 也一起拉過去。
4. asycData 裡面只能用來拉資料，不要做資料處理，另外盡量用 Promise.all 併發去取 不要 await，如果有關聯性要另外拉出去包 promise。
5. [ nuxt2 ]如果是使用 2，需要用到 server api 的服務，才需要用到 proxy 代理
6. 自己寫一個 plugin
7. [ nuxt3 ] 定義元件名稱

<script setup>
  defineOptions({
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {},
  })
</script>

8. [ vue ] tab 轉換可以使用 <component :is="data[active]" />的寫法

const active = ref('tab1');
const data = ref({
  'tab1': PageAboutTabContent1,
  'tab2': PageAboutTabContent2,
  'tab3': PageAboutTabContent3,
  'tab4': PageAboutTabContent4,
});

<component :is="data[active]" />

[ Chrome DevTools ] DOM 中斷點

在要觀察的 DOM 上按右鍵選擇 attribute modification

當他發生屬性改變，例如 display: block 變成 display: none 時會觸發

重跑之後當他屬性發生改變，就能中斷在那個地方

---

參考來源：

1. 開發必備，摸索不完的 Chrome DevTools 小技巧之設置斷點篇
2. Chrome DevTools: DOM 中斷點

[ nuxt3 ] 使用 eslint

網頁

---

Install Dependencies

npm install --save-dev eslint @nuxt/eslint-config

Configuration

Add .eslintrc.cjs to the root folder of your Nuxt app.

// .eslintrc.cjs
module.exports = {
  root: true,
  extends: ['@nuxt/eslint-config'],
}

package.json

// settings.json
"scripts": {
  ...
  "lint": "eslint .",
  "lint:fix": "eslint . --fix",
  ...
},

Install the VS Code ESLint extension.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

---

遵守 airbnb 的 esLint 規範

// .eslintrc.cjs
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    '@nuxt/eslint-config',
    '@vue/airbnb',
  ],
  parserOptions: {
    parser: '@babel/eslint-parser',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vuejs-accessibility/label-has-for': 'off',
    'vuejs-accessibility/form-control-has-label': 'off',
  },
};

[ docker ] 安裝套件步驟

外包案子需要安裝套件時的步驟：

1. make exe 進入 container
2. npm install 套件名稱
3. 若有顯示warning，依照說明執行修復指令 ex: npm audit fix --force
4. 以上指令會直接修改 package.json 以及 package-lock.json
5. 打 exit 退出 container，打開 VSCode
6. 修改 package.json 版本，把^刪除（固定版本）

[ JavaScript ] 隔離作用域，不互相影響的方式

讓他形成閉包，互不影響

;(function(window, document, undefined){
  .
  .
  .
})(window, document)

;(function(window, document, undefined){ ... })(window, document);
這是一個 IIFE，用分號開始，以確保在連接其他可能存在的程式碼時不會造成問題。
這個函式接受三個參數：window、document、以及undefined（這裡 undefined 是參數名稱，但實際上傳遞的值是 undefined）。
這些參數是為了防止在程式碼執行期間被重新定義。

[ share link ]

qzone: 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{URL}}&title={{TITLE}}&desc={{DESCRIPTION}}&summary={{SUMMARY}}&site={{SOURCE}}&pics={{IMAGE}}',
qq: 'http://connect.qq.com/widget/shareqq/index.html?url={{URL}}&title={{TITLE}}&source={{SOURCE}}&desc={{DESCRIPTION}}&pics={{IMAGE}}&summary="{{SUMMARY}}"',
weibo: 'https://service.weibo.com/share/share.php?url={{URL}}&title={{TITLE}}&pic={{IMAGE}}&appkey={{WEIBOKEY}}',
wechat: 'javascript:',
douban: 'http://shuo.douban.com/!service/share?href={{URL}}&name={{TITLE}}&text={{DESCRIPTION}}&image={{IMAGE}}&starid=0&aid=0&style=11',
linkedin: 'http://www.linkedin.com/shareArticle?mini=true&ro=true&title={{TITLE}}&url={{URL}}&summary={{SUMMARY}}&source={{SOURCE}}&armin=armin',
facebook: 'https://www.facebook.com/sharer/sharer.php?u={{URL}}',
twitter: 'https://twitter.com/intent/tweet?text={{TITLE}}&url={{URL}}&via={{ORIGIN}}',
google: 'https://plus.google.com/share?url={{URL}}'

[ vue ] Nuxt DevTools、Vue DevTools

Vue DevTools

網頁

可以在 tool 裡面更好找你的元件，必須要取名
1.

export default {
  name: '',
  data() {
    return {
    };
  },
.
.
.

<script setup lang="ts">
definePageMeta({
  layout: 'default',
  name: '',
})
</script>

ps：

interface PageMeta {
  validate?: (route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>
  redirect?: RouteRecordRedirectOption
  name?: string
  path?: string
  alias?: string | string[]
  pageTransition?: boolean | TransitionProps
  layoutTransition?: boolean | TransitionProps
  viewTransition?: boolean | 'always'
  key?: false | string | ((route: RouteLocationNormalizedLoaded) => string)
  keepalive?: boolean | KeepAliveProps
  layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>
  middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
  scrollToTop?: boolean | ((to: RouteLocationNormalizedLoaded, from: RouteLocationNormalizedLoaded) => boolean)
  [key: string]: unknown
}

Vue DevTools

網頁

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
})

[ css ] currentColor

如果元素也沒有指定顏色，那它就會從父級去繼承，直到文檔的根結點 html 標籤都還沒有指定顏色，就會應用上瀏覽器預設的顏色。

圖片來源：https://ithelp.ithome.com.tw/articles/10340648

使用方式：

.container{
    color: #3CAADB;
    border: 4px solid currentColor;
}

[ font ] 使用 icoMoon 做 icon font

icoMoon

處理 icon 使用說明

目的為統一 icon 大小，隔線選 24px

1. 點選左上 import icons
2. 點選底部 Generate Font ：若發生異常要清除 icon 複雜結構 ( 詳見 icon 規範 )
3. 去除 icon 顏色
4. Ragular Icons

• 統一 Grid (右上)
• Canvas => square canvas
• Scale => fit to canvas
• Scale => 統一圖示大小
• 改圖示名稱
• 設定 ( Preferences ) Meta: font name, class prfix, support, css selector ( <i> tag )

---

icon 規範

1. 將文字、線段 ( Strokes ) 轉換 / 展開為路徑( fills )。
2. 目前版本的 IcoMoon 並不完全支援奇偶規則，請使用非零纏繞。
3. 將路徑 ( fills ) 複合/合併，避免路徑重疊。
4. 挖空設計時，不要使用色塊填充，可以以用複合路徑將形狀減去 ( 可使用 Illustrator 路徑管理員 )。
5. Svg 中嵌入點陣圖也無分成為向量圖，應避免嵌入向量圖。

ps. 執行過的心得：開啟路徑管理員面板，試試看哪一種可以達到目的

---

維護

download 下來後，只需要上傳 json 的版本就好
等要維護的時候，匯入 json，再進行後續處理

[ nuxt2 ] 生命週期

閱讀文章

beforeCreate 和 created 在 server side 和 client side 都會跑，可理解為從 beforeMount 開始就正式進入 client side render 的部分

如果要寫在 beforeCreate 和 created 應該要區分好是 server side 還是 client side 要跑的

[ vue ] 當遇到 api 資料未提供 id ，但卻需要使用迴圈，需要綁定 :key 時

解方：使用 object-hash 套件

---

install

npm install object-hash

使用

但要注意 item 結構不會有完全一樣的情況發生，如果有，還是可以加上 index 確保他的唯一性

有些物件如果需要 cache 住也可以在他上面綁上 :key，目前沒有用但下次可以試試看。

// .vue
import hash from "object-hash";

<SwiperSlide
    v-for="item in props.propsData"
    :key="hash(item)"
>

---

補充說明 key 需要具備唯一性的原因

v-for 的 key 必須是唯一值，才可以讓 Vue 在更新 v-for 所產生的列表時，能準確更新節點。相反，如果使用 index 作為 key，或者不綁定 key，Vue 就會以該節點的位置作為 key，有機會因為錯誤套用之前渲染過的節點而造成錯誤。

• Vue 是採用「就地更新」來更新以 v-for 渲染的元素，並非移動 DOM 來完成。
• Vue 會重用已經渲染的 DOM 節點，並利用該節點 key，對比舊節點與新節點的內容，來判斷是否要更新該節點。

資料來源：https://ithelp.ithome.com.tw/articles/10275920

[ html ] fieldset + legend

跟同事在研究 material-ui 如何做 input 樣式

發現他們使用了 <fieldset> 和 <legend>，設定成 absolute 疊在 input 上

[ 一台筆電動應多個 github帳號 ]

利用 ssh-keygen -t rsa -C "mail" 去建立 key

---

config 設定

Host github-personal
     HostName github.com
     User git
     IdentityFile ~/.ssh/id_rsa_personal
Host github-work
    HostName github.com
    User git
    IdentityFile ~/.ssh/id_rsa_work

---

遇到的錯誤

chmod 400 ~/.ssh/id_rsa_personal

[ 效能 ] 相關

1. js 取物件，六層以上效能會很差，可以用變數去先抓到前面幾層，然後用變數取代

ex: 
let a = items.value[0].item.data
let b = a.name

2. js 裡面 -- 效能會比 ++ 好, 所以 for 迴圈可以使用 --，效能會好一點點
3. 用空間（ram）換時間（render 時間），有些 if - else 可以把判斷直接使用樹狀結構的物件整理，然後把他放到 constants。

[ css ] px / rem / em

rem 切版

如果使用 rem ，你可以透過改變 base，就做到伸縮的效果，這裡的 r 是 root 的意思

如果設計稿有些尺寸沒有出，你可以透過改變 base 就做到改變畫面的過度效果

設定 base
html{
  font-size: 14px;
  @media screen and (min-width: 821px) {
   font-size: 16px;
  }
}

// 使用
.logo{
  width: 10rem;
  padding: 0.135rem;
}

---

em 切版

em 是相對於父層來說，你可以在父層定義 base

如果是元件，使用 em，在搬運到其他地方用的時候，可以比較客製化情境

設定 base
header{
  font-size: 14px;
  @media screen and (min-width: 821px) {
   font-size: 16px;
  }
}

// 使用
.logo{
  width: 10rem;
  padding: 0.135rem;
}

---

px 切版

px 就是寫死單位大小

像是 padding 如果一直都是 20px，就還是會使用 px，去固定他的間距

---

如何在 figma 上面切換單位？

[ api ] 專案的 api 管理

待補

[ git ]

１．設定 local

git config --global user.email [email protected]

2. 刪除 .DS_Store

find . -name .DS_Store -print0 | xargs -0 git rm -f --ignore-unmatch

[ css ] font-face

在 CSS 中使用 @font-face 規則引入字型檔案時，如果字型檔案不是從同一個域載入，瀏覽器會進行 CORS 檢查。
如果伺服器沒有正確配置 CORS 標頭，或者沒有允許來自其他域的字型檔案請求，瀏覽器就會拒絕載入字型檔案，並在控制台中顯示 CORS 錯誤訊息。