---
# System prepended metadata

title: 2022 開工大禮包

---

# 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