# 2022 開工大禮包 [TOC] ## Naming Convention ref: https://namingconvention.org/vuejs/ - Components - big camel: ApplePen.vue - Assets: .png .txt .gif - small snake: apple_pen.png - variable 變數 - small camel: let applePen = balabala - methods - small camel: applePen() { console.log() } ## Day1 1.建立開發環境 ```bash $ git clone https://gitlab.com/ncufresh/ncufresh22.git ``` 2.弄髒他 > client、server 都要，~~如果你有 docker，也可以直接`docker-compose up`~~ update: 先別用 docker，裡面的 command 是 for production ```bash $ npm install $ npm start ``` :::warning NUXT3 至少要 node >=14，要注意自己的 node 版本 太低的記得去升級（可以透過 nvm、n） ::: ## Daily 每天我們會定時把大家前一天的成果都merge在一起 下午1點開工時 ```bash= $ git pull // 更新master branch $ git checkout master // 切換到master branch $ git branch -d 名字 // 刪掉前一天建立的branch $ git checkout -b 名字 // 建立自己的branch ``` 晚上9點收工時 ```bash $ git add . $ git commit -m "今天的工作內容" $ git pull // 與遠端整合 $ git push // 將今天的內容push到遠端repo中自己的branch ``` :::warning 沒事就用`git status`確認一下自己在幹嘛，迷因圖上會出現的操作就盡量別了! ::: :::success commit message 請盡量遵照 convential commit 的規範（樣子） prefix 一定要有，內文寫中文沒關係 https://www.conventionalcommits.org/en/v1.0.0/ https://cythilya.github.io/2021/03/16/conventional-commits/ ::: ## 富堅的 vue3 升級大補包 :::info 一定要看R，我們開發期盡量遵照`composition api`的寫法! ::: https://hackmd.io/WoiHY3V8SoiUbdvNFH3JUA ## C..S..S.. ### 置中大補帖 https://www.w3.org/Style/Examples/007/center.en.html ### 請加 `scoped` ~~去年的悲劇~~ https://hackmd.io/@2021ncu-fresh-code/S1VGtA7pd ### display:flex https://www.casper.tw/css/2017/07/21/css-flex/ https://www.casper.tw/css/2020/03/08/flex-size/ ## 各種 Device 可以選擇用 NUXT 帶的裝置偵測 或是用 media query 來做，大約兩周時會補上 ## Extension https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig