---
tags: Vue 實戰班
---

# 📕 課程大綱介紹

## 課程規劃說明

本課程在規劃上參考了其它直播班，以及過去 Vue.js 的影音課的經驗，目的是希望學員在學習後，除了能夠完成一個作品以外，更能兼顧許多面向，讓學員在求職、開發的路上更為順利，基本概念如下：

- 完成一份具個人特色、可用來面試的作品
- 了解 JavaScript 觀念，並可靈活運用 Vue.js 框架；不只會寫，更知道如何介紹
- 熟練 Vue.js 關鍵的語法，有效加速開發
- 理解 Vue.js 運作觀念，往後無論投入任何框架都能輕鬆學習

### 課前準備

JavaScript 框架的運用都不會脫離核心概念，課前所提供的影音課程能夠讓大家先理解核心的運作概念，也能夠避免「這樣寫會動，但不知道為什麼」的情況。

關鍵：this、物件索引

### 第一週：重新打造 JavaScript 思維，從函式拆解認識設計模式

關注點分離是目前所有主流 JavaScript 框架的運作方式，這讓框架本身更容易被理解且易於維護，在多人協作可符合相同的規範，六角的前端員工到職時，也是先學會此觀念，並且表示此觀念相當有助於 JS 的架構拆分及管理。

關鍵：理解框架為什麼要這麼做、對於未來的 JS 架構管理非常有幫助

作業主題：**函式結構化拆解練習**

### 第二週：加速學習新基礎，ES6 語法起手式

Vue.js 目前不會特別推薦 ES5、ES6 的撰寫方式，但 ES6 的部分語法更加精簡有效率。而在 Vue Cli 後的模組拆分、套件運用，大多都是搭配 ES6 語法，因此在前期先投入會有助於往後的學習。

關鍵：ES6 語法理解、Let Const、Template Literal、Arrow Function、Promise、ES Modules

作業主題：**ES6 模組應用開發**、**閱讀課程文件**

### 第三週：Vue.js 起步走

所有框架都區分為「語法運用」及「觀念」，本段課程的重點是介紹 Vue.js 中最常用的 80% 語法，掌握後將大幅增加未來的開發速度。

關鍵：Vue.js 開發中最常用的 80% 語法

作業主題：**Vue 起步走，後台介面練習**

### 第四週：元件化

一個專業的開發者，開發的過程中一定會掌握「DRY」 的觀念（don't repeat yourself），精準的拆分模組並增加每段程式碼的可用性，並且介紹 Vue.js 中的元件生命週期，了解其中的運作方式。

關鍵：Component、life cycle

作業主題：**模組功能設計**

### 第五週：進階語法介紹

前幾章節已經介紹了 Vue 的大部分運用方法，掌握後已經足以應對大部分的開發情境，接下來會先理解 Vue 的原型概念，並嘗試導入不同的套件，學會如何站在巨人的肩膀上完成我們的目標。

關鍵字：Vue API、Prototype、Vue Plugin

作業主題：**表單驗證實戰**

### 第六週：Vue Cli、Vue Router

單頁式應用程式現在已經成為顯學，不僅可以改善開發上的效率更能增加使用者的體驗，透過 Vue 與前端 Router 的觀念讓開發 SPA 變得輕而易舉。

關鍵：Webpack、Vue Router、Vue CLI

作業主題：**多頁式應用程式**

### 第七週：輕鬆掌握的設計概念

進入一個網站的第一印象永遠是美感，不會是程式碼。所以再好的技術沒有透過包裝也無法達到 100 分的表現，本章節透過專業設計帶你用簡單技巧，呈現出 1000 分的表現方法！

關鍵：容易掌握的設計觀念、案例分享、素材搜集

作業主題：**最終作業前夕，規劃你的作品**

### 第八週：最終作業挑戰

本課程會提供專屬實戰 API，最後將示範該如何運用實戰 API 打造出獨一無二的電商網站！

作業主題：**完成一個 Vue 作品吧**