# 新生知訊網 \\第一次教學/ 程設組 ＋🧂 ---- ## Outline * 安裝開發環境（包含前後端） * 版本控制軟體：Git * 網頁基礎 * Vue 框架 * 寒假作業 --- ## 環境設置 * 開發過程中會用到的軟體： * 版控：git * 資料庫：SQLite * VPN：[OpenVPN](VPNhttps://openvpn.net/community-downloads/) * node 版本管理器：nvm * 編輯器：VSCode ---- ## 安裝包 [Click Me](https://drive.google.com/drive/folders/12iHP1D6wiXb8jPVeOreGlxtZxmuXTmA8?usp=sharing) ---- Browser Extension: [Vue Devtools](https://devtools.vuejs.org/) [VisBug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc) --- ## Git ref:https://backlog.com/git-tutorial/tw/ ---- ### 何謂版本控制  ---- #### 版本衝突  ---- #### 使用 git  ---- ### git #### git repository  ---- #### local repo and remote repo  ---- #### clone repo  ---- #### 小統整 - 複製儲存庫：clone - 本地端repo和遠端同步：pull - 推送本地端更新至遠端：push ---- ### git commit  ---- ### git add & git commit (提交)  - 欲把檔案從工作目錄加到索引，我們可以使用 `git add <file(s)>` 這條指令，`<files>` 的部分請直接替換成檔名，或者以`.` 代表整個工作目錄 - 註冊完之後，可以使用 `git commit` 將變更檔案提交到本地端的數據庫 ---- - 提交後，系統會產生上次提交狀態與本次提交的差異記錄 (revision)，並產生一組識別碼 (hash) 來區分每次的提交 - 錯誤修復、新增功能之類的提交僅量分開提交，如果日後需要回滾 (roll back) ，可以比較快速的找到問題 ---- ### commit message - 提交變更時，除了將不同功能的更新分開提交之外，每次提交也需要寫一個 commit message，來簡短的解釋更新內容 - commit message 通常是這樣組成：\<what\>:\<why\>，例如 fix: fix fading issue. ---- * 動詞的部分也有規範（不是硬規範，比較偏向是共識） - feat: 新增/修改功能 (feature)。 - fix: 修補 bug (bug fix)。 - docs: 文件 (documentation)。 - style: 格式 (不影響程式碼運行的變動 white-space, formatting, missing semi colons, etc)。 - refactor: 重構 (既不是新增功能，也不是修補 bug 的程式碼變動)。 ref: [git commit message]( https://wadehuanglearning.blogspot.com/2019/05/commit-commit-commit-why-what-commit.html) ---- commit 完了之後，便可以推送到儲存庫上了，即使用 git push 這條指令 - push之後，git會去判斷有沒有發生 conflict ，如果沒有，即進行 fast-forward 把變更合起來 ---- ## 網頁基礎  --- ### 你以為我要從三兄弟開始教嗎？並沒有。 以下是你在寒假期間需要自己掌握的東西。 - HTML: 熟悉各種 tag 的作用 - ***CSS: 熟悉各種定位法，像是 grid, flex, 和各種 position 和 RWD***，如果還有空可以查查 CSS 動畫 - JS: vue 和 express 會用到東西、DOM 操作 ---- ### 互動式教學資源 - HTML: https://www.codecademy.com/learn/learn-html - CSS: https://www.codecademy.com/learn/learn-css - JS: https://www.codecademy.com/learn/introduction-to-javascript --- ### Vue 框架 首先，請用 VSCODE 開啟一個資料夾 (這個資料夾是你資料儲存的地方) Ctrl+J 或 CMD+J 開啟終端機，並下 `npm create vue@3` 或 `pnpm create vue@3` ---- 出現幾行綠色的字，就表示專案建立完成了  註：近期 vue 有經歷幾個大版本更新 (vue CLI-> vite)，所以原本在第 11,12 頁建立專案的方式已經進入 Maintenance Mode了，故這裡寫的不一樣@ ---- 接著，下 cd <你的project名稱> 切換到目錄下 並下 ==`npm install`== 安裝相關套件 如果有設定環境變數，用 ==`code .`== 以 VSCODE 直接開啟此資料夾 <在 VSCODE裡的終端機 >下 ==`npm run lint && npm run dev`== ---- 以上，就是專案的建立過程，接著我們要將東西推上 github repo  ---- 你的 github 應該會出現這個畫面  ---- 接著回到 vscode，到終端機下 ==git init==， 把全部的東西加到暫存，接著推到遠端 ---- git init git add . git commit -m "init" git remote add origin <你的 .git URL> git push -u origin main ---- #### 資料夾結構  ---- - node_modules: npm 依據 package.json 安裝的所有相依套件 - vite.config.json: vite 設定檔 - src 資料夾：程式碼放置地，此資料夾**會被編譯**，如果要引用資源需使用相對路徑 - public 資料夾：靜態資源放置地，此資料夾**不會被編譯**，引用資源的話需使用絕對路徑 ----  ---- in ==src== folder: - main.js：程式的進入點，會在這裡創建 Vue 實體，並掛在到 DOM 上 - App.vue：網頁根元件，所有操作都跟他有關 ---- #### MVC  ---- #### MVVM  ----  ---- ### 寒假作業：留言板 ---- 1. 首頁功能： * 帳號註冊、登入頁面 * 文章顯示 * !登入、註冊按鈕要隨登入狀態而變 * !只有自己才可以修改自己的文章 ---- 2. 顯示文章頁面 * 每個人都可以留言 * 只有自己可以刪除自己讀留言 --- 本週起，各位可以先稍微發想一下留言板的外觀 (前端長什麼樣子) 預計1/13之後會再排一次教學，屆時會教大家 composition API、後端 express 和資料庫的部分， 接著就放手讓大家在寒假期間做出留言板，並於開學後驗收 ---- 祝大家期末考 ALL PASS 新年快樂