2023-10-28

Vue

Husky + Lint-Staged 自動修正 lint 錯誤和程式碼排版

安裝

1	npm install husky lint-staged -D

husky 設定
初始化設定:

1 2	npm set-script prepare "husky install" npm run prepare

2023-10-22

Vue

SourceTree & github新增專案

設定帳號

新增一個資料夾叫test_project
在SourceTree內，點選 New…，選擇
Add Existing Local Repository（加入剛剛新增的專案）。

加到本機端的 Git 版本控制，確認資料夾無誤後按下 Create。
加入這個資料夾，＝>資料夾內會多一個.git檔案（如同git 指令中的初始化 git init），
SourceTree專案看到剛剛新增專案
提交 Commit =>如同git commit -m “新增的內容”

綁定github 專案
到github新增一個專案與剛剛localhost 端新增一個的資料名同名

到SourceTree內右上角setting按鈕按下

出現對話框選擇add 按鈕

回到SourceTree專案內 push 到master (如同 git push master)

git 遠端就出現這個專案剛剛push的內容

2023-10-22

Vue

SourceTree & github目錄

2023-10-22

Vue

SourceTree 設定帳號與GitHub Personal access token

SourceTree 是一款以 Git 為基礎設計的 GUI 圖形化工具

安裝SourceTree

SourceTree官方

設定帳號

右上角的齒輪，選擇第一個 Accounts（帳戶）

按下左下角的 Add（新增）

Host（專案託管、放置的位置，請選擇 GitHub）
Auth Type（驗證類型，請選擇基本 Basic）
Username（帳號）
Password（密碼）
Protocol（通訊協定，請選擇 HTTPS）

產生Token令牌,與使用訪問令牌

要在 SourceTree 中使用 GitHub 的兩因素身份驗證，您只需使用訪問令牌而不是密碼即可。執行此操作的步驟如下

轉到 GitHub 中的個人訪問令牌設置。
單擊生成新令牌按鈕。
將令牌命名為描述性的。
選擇您希望授予此令牌的範圍
單擊生成令牌按鈕
複製令牌並將其用作託管存儲庫中的密碼 (保存好密碼）

點擊settings. 如圖

點擊Personal access tokens, click Tokens (classic). 點擊Generate new token (classic).

Save 完成後，就會出現你的 Github 帳戶了！

參考資料

2023-10-22

Vue

Git本地端操作

安裝 git請參閱
檢查 git 版本指令

1 2	git ---version git version 2.15.0

git

列出目前設定的參數:git config –list

//指令：列出目前設定的參數
git config --list
如下
core.excludesfile=~/.gitignore
core.legacyheaders=false
core.quotepath=false
mergetool.keepbackup=true
push.default=simple
color.ui=auto
color.interactive=auto
repack.usedeltabaseoffset=true
alias.s=status
alias.a=!git add . && git status
alias.au=!git add -u . && git status
alias.aa=!git add . && git add -u . && git status
alias.c=commit
alias.cm=commit -m
alias.ca=commit --amend
alias.ac=!git add . && git commit
alias.acm=!git add . && git commit -m
alias.l=log --graph --all --pretty=format:'%C(yellow)%h%C(cyan)%d%Creset %s %C(white)- %an, %ar%Creset'
alias.ll=log --stat --abbrev-commit
alias.lg=log --color --graph --pretty=format:'%C(bold white)%h%Creset -%C(bold green)%d%Creset %s %C(bold green)(%cr)%Creset %C(bold blue)<%an>%Creset' --abbrev-commit --date=relative
alias.llg=log --color --graph --pretty=format:'%C(bold white)%H %d%Creset%n%s%n%+b%C(bold blue)%an <%ae>%Creset %C(bold green)%cr (%ci)' --abbrev-commit
alias.d=diff
alias.master=checkout master
alias.spull=svn rebase
alias.spush=svn dcommit
alias.alias=!git config --list | grep 'alias\.' | sed 's/alias\.\([^=]*\)=\(.*\)/\1\	 => \2/' | sort
include.path=~/.gitcinclude
include.path=.githubconfig
include.path=.gitcredential
diff.exif.textconv=exif
user.name=lara huang
user.email=lara1105huang@gmail.com
core.excludesfile=/Users/larahuang/.gitignore_global
core.autocrlf=false
difftool.sourcetree.cmd=opendiff "$LOCAL" "$REMOTE"
difftool.sourcetree.path=
mergetool.sourcetree.cmd=/Applications/Sourcetree.app/Contents/Resources/opendiff-w.sh "$LOCAL" "$REMOTE" -ancestor "$BASE" -merge "$MERGED"
mergetool.sourcetree.trustexitcode=true
commit.template=/Users/larahuang/.stCommitMsg
color.ui=true
core.repositoryformatversion=0
core.filemode=true
core.bare=false
core.logallrefupdates=true
core.ignorecase=true
core.precomposeunicode=true
remote.origin.url=git@github.com:lara1105huang/blog_lara.git
remote.origin.fetch=+refs/heads/*:refs/remotes/origin/*
branch.main.remote=origin
branch.main.merge=refs/heads/main

設定使用者名稱及信箱（總體）

1 2	git config --global user.name、 git config --global user.email

設定查看配置

1 2	git config --global --list git config --local --list

Git本地端操作

新增版控初始化

mkdir 資料夾名稱 //新增資料夾名稱
cd 資料夾名稱  //到資料夾內
git  init //加入版控，初始化

Initialized empty Git repository in /Users/larahuang/Desktop/2023-10m/newtest/.git/

為什麼我看不到隱藏檔案
Mac＝>

如何停止整個版本控制

1	rm -r .git

版控內的忽略檔案（不加入版控寫在這個檔案內）
新增 .gitignore

1	touch .gitignore //新增 .gitignore版控內的忽略檔案

時常檢查狀態

1	git status

取消追蹤

1	git rm --cached <file>

本地端又分為：

工作目錄（Working Directory）

放入暫存區（Stating Area）

git add .

### 加入本地端儲存庫

1	git commit -m '版本訊息'

本地端檔案庫（local repo）

1	git commit -am 'message'

檢視 commit 紀錄

git log

輸出更簡潔的 log

1	git log —-oneline

#	指令	解析
1	＄git config global user.name	配置name
2	＄git config global user.email	配置email
1-1查看配置	＄ git config --list	列出目前設定的參數
1-2查看配置	＄ git config --global --list	查看當前global用戶配置
1-2查看配置	＄ git config --local --list	查看當前local用戶配置
3	.gitignore	忽略檔案,新增.gitignore 加入要忽略的檔案
4.1	$ git init	新增版控，初始化
4.2	$ rm -r .git	停止整個版本控制
4.3	$ git add .	放入暫存區
4.4	$ git status	時常檢查狀態
4.5	$ git rm --cached	取消追蹤
4.6	$ git log	檢視 commit 紀錄
4.7	$ git log --oneline	檢視輸出更簡潔的 log
4.8	$ git log 檔案名稱	檢視檔案名稱
4.9	$ git rm 檔案名稱	刪除檔案
4.10	$ $ git rm --cached welcome.html	讓檔案不再受 git 版控（並不是刪除！）
4.11	$ git mv ex. $ git mv welcome.html hello.html	變更檔名
4.12	$ git checkout ex.切換到最新版本：$ git checkout master	切換版本/分支
4.13	$ git diff ex.比對工作目錄與暫存區(Stating Area)全部檔案的差異：$ git diff --cached ex.比對當前文件與暫存區(Stating Area)全部檔案的差異：$ git diff filename 比對工作目錄（Working Directory）與指定 commit 之間的差異：$ git diff commit-id 比對兩個 commit 之間的差異 $ git diff [commit-id][new commit-id] 比對兩個 branch 之間的差異 $ git diff branch1 branch2	比對工作目錄

git 參考資料

2023-10-22

Vue

style Prettier 套件 - 自動整理程式碼格式

套件husky,lint-staged,eslint

husky

1	npm install husky lint-staged -D

1	npm install -g eslint

在 package.json 檔案中加上套件相關資訊

"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write"
    ]
  }

在 VSCode 安裝 prettier

設定在存檔時執行 prettier，在設定中把 Format on Save 選項打勾：

<img style="margin-top:10px" src="https://blog-lara.vercel.app/images/prettier/form_on_save.png">

<div>參考資料</div>
<a href="https://titangene.github.io/article/javascript-object-keys-values-entries.html" target="_blank">參閱prettier</a>

2023-10-22

Vue

Git安裝

安裝 git

method法一、官網下載
適用：windows、Mac OS X
跟一般的軟體安裝方式相同：下載、安裝、執行。

method二、Homebrew 下載
適用：Mac OS X

Homebrew是一款自由及開放原始碼的軟體套件管理系統，用以簡化 macOS系統上的軟體安裝過程。

1.在終端機上輸入以下指令就可以安裝

1	/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homwbrew/install/master/instakk.sh)"

2.接著安裝 git 輸入

1	brew install git

3.檢查 git 版本

1 2	git ---version git version 2.15.0

2023-10-21

Vue

javascript 搜尋陣列中的物件

“陣列”由方括號 [] 表示，而”物件”由大括號 {} 表示。

使用forEach迴圈判斷物件宣染到畫面

//html
<ul class="list">
<li><span></span></li>
</ul>


<script>
    //陣列arrays
    const arrays = [
            { name:"Adam", profession:"Engineer", company: "Google" },
            { name:"Sam", profession:"Manager", company: "Amazon" },
            { name:"Gerogia", profession:"Designer", company: "Netflix" },
            { name:"Kate", profession:"Engineer", company: "Microscoft" },
            { name:"James", profession:"Sales", company: "Amazon" },
    ];

    //綁定
    const list =document.querySelector('.list');
    let str='';
    arrays.forEach(item =>{
        if(item.company==='Amazon'){
        str +=`<li><span>${item.name}</span></li>`
        }
    })
    list.innerHTML = str;
</script>

使用map()迴圈判斷物件宣染到畫面

//html
<ul class="list">
<li><span></span></li>
</ul>


<script>
    //陣列arrays
    const arrays = [
            { name:"Adam", profession:"Engineer", company: "Google" },
            { name:"Sam", profession:"Manager", company: "Amazon" },
            { name:"Gerogia", profession:"Designer", company: "Netflix" },
            { name:"Kate", profession:"Engineer", company: "Microscoft" },
            { name:"James", profession:"Sales", company: "Amazon" },
    ];

    //綁定
    const list =document.querySelector('.list');
    let str='';
    arrays.map(item =>{
        if(item.company==='Amazon'){
            return  str +=`<li><span>${item.name}</span></li>`
        }
    })
    list.innerHTML = str;
</script>

使用find迴圈判斷物件宣染到畫面

//html
<ul class="list">
<li><span></span></li>
</ul>


<script>
    //陣列arrays
    const arrays = [
            { name:"Adam", profession:"Engineer", company: "Google" },
            { name:"Sam", profession:"Manager", company: "Amazon" },
            { name:"Gerogia", profession:"Designer", company: "Netflix" },
            { name:"Kate", profession:"Engineer", company: "Microscoft" },
            { name:"James", profession:"Sales", company: "Amazon" },
    ];

    //綁定
    const list =document.querySelector('.list');
    let str='';
    arrays.find(item =>{
        if(item.company==='Amazon'){
        str +=`<li><span>${item.name}</span></li>`
        }
    })
    list.innerHTML = str;
</script>

2023-10-19

javascript

js switch

範例1

let animal = '狗';
//這是錯誤範例
switch (animal) {
  case '貓':
    console.log('喵');
  case '狗':
    console.log('汪');   //汪
  case '雞':
    console.log('咕');   //咕
  case '羊':
    console.log('咩');   //咩
  default:
    console.log('無此動物');  //無此動物
}

將「表達式的值」與「case 條件裡的值」做比對，執行符合此條件下方的陳述式

js_switch

let BMI = 34;

switch (true) {
  case BMI >= 35:  
    console.log('重度肥胖');
    break;
  case BMI < 35 && BMI >= 30:
    console.log('中度肥胖');
    break;
  case BMI < 30 && BMI >= 27:
    console.log('輕度肥胖');
    break;
  case BMI < 27 && BMI >= 24:
    console.log('過重');
    break;
  case BMI < 24 && BMI >= 18.5:
    console.log('正常');
    break;
  default:
    console.log('過輕');
}

參考資料：
switch js

2023-10-19

Vue

js 物件轉陣列的迴圈

實戰api串接或是第三方資料，不是所有資料都是給予“陣列”，就無法使用如：forEach、map、reduce、find… 迴圈，物件資料如下

//物件形式
const roles = {
  '001': {
    name: '海綿寶寶',
    expert: '吸收很快',
  },
  '002': {
    name: '耶夢',
    expert: '任意門',
  },
  '004': {
    name: '超人',
    expert: '英雄',
  },
};

錯誤示範是使用forEach
要對物件使用陣列方法，ES6 的語法對物件使用陣列方法=>將物件轉為陣列

Object.values
Object.keys
Object.entries

使用 Object.values 物件轉陣列forEatch迴圈

const roles = {
  '001': {
    name: '海綿寶寶',
    expert: '吸收很快',
    img:'https://cdn.pixabay.com/photo/2017/05/08/13/15/bird-2295431_1280.jpg'
  },
  '002': {
    name: '耶夢',
    expert: '任意門',
    img:'https://cdn.pixabay.com/photo/2015/11/16/16/28/bird-1045954_1280.jpg'
  },
  '004': {
    name: '超人',
    expert: '英雄',
    img:'https://cdn.pixabay.com/photo/2017/05/08/13/15/bird-2295431_1280.jpg'
  },
};
//綁定
const list = document.querySelector('.list');
//let 觀念
let str = "";
//Object.values 與 forEach
Object.values(roles).forEach((item) => {
 console.log(item); 
  //加法赋值运算符
  str += 
    `<li class="card col-md-3 mb-2">
     
      <span class="card-body">
       <span style="width:50px;height:50px;overflow:hidden"><img src="${item.img}" style="width:80px;height:auto;"></span>
       <span><b>${item.name}</b></span>
      專業能力：
       <span> ${item.expert}  </span>
      </span>
     </li>`;
});
list.innerHTML = str;

使用 Object.keys物件轉陣列forEatch迴圈

const roles = {
  '001': {
    name: '海綿寶寶',
    expert: '吸收很快',
  },
  '002': {
    name: '耶夢',
    expert: '任意門',
  },
  '004': {
    name: '超人',
    expert: '英雄',
  },
};
//綁定
const list = document.querySelector('.list');
//let 觀念
let str = "";
Object.keys(roles).forEach((key) => {
  console.log(roles[key]); 
   str += 
    `<li class="card col-md-3 mb-2">
     <span><b>${roles[key].name}</b></span>
      <spanclass="card-body">
      專業能力：
       <span> ${roles[key].expert}  </span>
      </span>
     </li>`;
});
list.innerHTML = str;

使用 Object.entries 物件轉陣列forEatch迴圈

const roles = {
  '001': {
    name: '海綿寶寶',
    expert: '吸收很快',
  },
  '002': {
    name: '耶夢',
    expert: '任意門',
  },
  '004': {
    name: '超人',
    expert: '英雄',
  },
};
//綁定
const list = document.querySelector('.list');
//let 觀念
let str = "";
Object.entries(roles).forEach((obj) => {
  console.log(obj[0], obj[1]); 
    str += 
    `<li class="card col-md-3 mb-2">
     <span><b>${obj[0].name, obj[1].name}</b></span>
      <span class="card-body">
      專業能力：
       <span> ${obj[0].expert, obj[1].expert}  </span>
      </span>
     </li>`;
});
list.innerHTML = str;

參考資料

參閱mozilla Object.values() 參閱Object.keys() & Object.values() & Object.entries()