項(xiàng)目初衷
0 做個(gè)有特點(diǎn)的前端項(xiàng)目荚醒，而 MacOS 系統(tǒng)桌面可以實(shí)現(xiàn)的東西太多了
1 工作中主要技術(shù)棧為 vue2.x隆嗅，想通過項(xiàng)目實(shí)踐 react 的學(xué)習(xí)（hooks 熟練了榛瓮，react 和 vue3.0 都間接拿下了）
2 熟悉并實(shí)踐 TypeScript
附屬
我的電腦其實(shí)不是 macOS 系統(tǒng)，所以注定只能低仿。但這不影響我學(xué)習(xí) macOS 如 dock 的炫酷效果的實(shí)現(xiàn)及達(dá)到上述初衷的目的精续。
通過該 教程 修改了我的桌面重付，作為參考
開發(fā)環(huán)境搭建
直接使用 create-react-app with typescript 來快速搭建
yarn create-react-app my-app --typescript
引入 sass 為 css 預(yù)處理
yarn add node-sass
設(shè)置背景圖片
刪除所有不必要的文件及代碼后, 我使用上面教程中獲取的文件中的 sierra-4K.jpg 作為 App 界面背景
// App.scss
.App {
min-width: 1500px;
background: url(../assets/image/sierra-4K.jpg) center/100% no-repeat;
}
效果如下
使用 Github 自動(dòng)化部署
Create React App 官方文檔提供的部署到 github 的方法有問題
我使用了 GitHub Actions 代替 參考
在 package.json 內(nèi)添加 homepage
格式：https://{yourGithubName}.github.io/{yourRepositoryName}
// package.json
// ...
,
"homepage": "https://adashuai5.github.io/my-desktop"
}
// ...
新建項(xiàng)目文件 .github/workflows/ci.yml
name: my-desktop
on:
push:
branches:
- master
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@master
- name: Build and Deploy
uses: JamesIves/github-pages-deploy-action@master
env:
ACCESS_TOKEN: ${{ secrets.MY_WINDOW }}
BRANCH: gh-pages
FOLDER: build
BUILD_SCRIPT: npm install && npm run build
這里的 ACCESS_TOKEN 是在 Github repo 中 Settings 欄下設(shè)置的 Secrets
做好這些弓颈，在你每次 push 后 Github 就會(huì)自動(dòng)運(yùn)行 Actions 形成工作流了
等你的 push 成功翔冀，即可打開 Settings纤子，找到 Github Pages
選擇 gh-pages branch 此時(shí)會(huì)出現(xiàn)如上圖所示項(xiàng)目瀏覽鏈接控硼，如我這個(gè)項(xiàng)目 my-desktop
另外艾少，該項(xiàng)目 代碼，歡迎 watch 和 star幔妨。
小結(jié)
至此潮瓶，項(xiàng)目流程算是走了一遍毯辅。
目前該項(xiàng)目已完成 dock煞额，簡(jiǎn)單設(shè)置，基礎(chǔ)計(jì)算器胀莹，基礎(chǔ)畫板等功能描焰，即使是這些已有功能也有很多需要完善的地方。
后續(xù)我會(huì)慢慢優(yōu)化篱竭，并在相應(yīng)模塊代碼優(yōu)化到一定程度時(shí)不定時(shí)更新系列文章步绸。??
