Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Vue JS

用 VueJS 搭配 Firebase 實作一個部落格網站

學習使用 Vue.js 開發網站,建立你的作品集/部落格網站。從基礎開始到上架至 Firebase Cloud
Rating: 4.6 out of 54.6 (77 ratings)
196 students
Created by Happy Coding 快樂學程式
Last updated 3/2020
Traditional Chinese
30-Day Money-Back Guarantee

What you'll learn

  • VueJS 概念與完整教學
  • 學會使用 Vue 串接 Firebase Cloud API
  • 使用 Vue Cli 起手專案
  • 學習單向資料流 Flux 概念
  • 用 Vuex 導入資料流向
  • 建置一個 CRUD 的部落格

Course content

4 sections • 39 lectures • 8h 33m total length

  • Preview06:56
  • Vue js簡介與Vue官方文件介紹
    12:22
  • Vue CDN使用,Vue App Initialization
    08:22
  • v-bind 屬性綁定與資料插值
    16:57
  • Preview14:40
  • v-if 條件渲染與v-for 列表渲染
    23:57
  • Methods 方法與事件處理
    13:41
  • Computed 計算屬性與 Filters 資料過濾
    15:22
  • Watch 監聽資料
    09:43
  • Vue-CLI 介紹與環境建置
    08:37
  • Vue專案建置、腳手架介紹
    14:14
  • Lifecycle - Vue實例的生命週期
    21:14
  • Components 組件介紹
    20:45
  • Components 組件在Vue-Cli中的使用
    14:09
  • 利用組件重構首頁與Bootstrap-Vue快速建構基本樣式
    25:03
  • 用 Vue 建置首頁
    1 question

  • 整體網站頁面架構與資料流程
    06:10
  • Vue Router 介紹
    16:42
  • 路由建立與頁面建立
    17:47
  • 用 Vue 建置 about 頁面
    1 question
  • 文章頁面與路由傳遞參數
    14:18
  • 建立404NotFound路由
    07:59
  • Vuex 資料控管介紹
    08:11
  • Vuex - State 資料狀態
    14:35
  • Vuex - Mutations與Actions 改變資料狀態
    20:19
  • Vuex - Getters Vuex中的Computed
    16:59
  • CRUD功能介紹與撰寫邏輯
    17:44
  • CRUD - Create 文章上架功能製作
    15:58
  • CRUD - Update 文章更新功能製作
    20:16
  • CRUD - Delete 文章刪除功能製作
    08:27
  • 用 Vue 練習建置後台 CRUD 功能
    1 question

  • Firebase介紹與文件閱覽
    06:31
  • Firebase - Cloud Firestore專案建置與本地端Node.js配置方式
    15:27
  • Cloud Firestore資料庫與CRUD的關係
    06:26
  • Cloud Firestore - get 讀取資料與 Add 新增資料
    17:07
  • Cloud Firestore - Update 更新資料
    10:37
  • Cloud Firestore - Delete 刪除資料
    04:52
  • Vuex與Cloud Firestore 在畫面中的影響
    14:27
  • 練習使用 Firebase 功能串接 CMS 內容活動系統
    1 question

  • Vue專案佈署
    06:03
  • Firebase Hosting功能介紹與專案配置
    06:45
  • Firebase.json調整設定與本地端Server
    03:27
  • Firebase Hosting佈署完成網站上線
    04:47

Requirements

  • 不需要嚴謹的程式背景,願意思考學習
  • 有操作 Mac/Windows 電腦的基礎
  • 具備快樂學習的心情與一個假日
  • 具有 HTML, CSS 觀念,有操作過 JavaScript

Description

身為網頁設計師的你,想要擁有作品轉型成前端嗎?不懂網頁需要有人一步步帶你完成網站。想要學習 VueJS 仍沒有時間好好靜下心來學習。這次參與至該堂課,將是幫助你完成自己部落格網站的契機。

你為什麼需要上這堂課?

VueJS 是前端必懂三大網頁框架之一,由前 Google 中國工程師(Evan You)所開發,除了擁有豐富的中文資源以外,更在開發過程中有著 89% 的開發者滿意度。作為UI/UX設計師、前端開發者、後端工程師,甚至是剛入門網頁開發的新手都能以簡單的方式進行開發。其中更包括宣告式語法與 MVVM 方式,解決以往傳統 Javascript 是以命令式方式操作 DOM 文件,進行複雜的處理並且沒有智慧性。透過雙向綁定的概念,其友善程度會大幅降低對於資料的理解。

本課程將會包含以下內容:

這堂課程分為四個大章節。從基礎 VueJS 介紹與官網文件做分享,使用開發者常用的編輯器 VScode(Windows/Mac 皆能安裝使用)去製作一個完整 CRUD 的部落格網站。上完這堂課,你將擁有自己建置部落格網站的能力,跟著講師一起使用 VueJS 完成。在開發一個應用其結構是相當重要的,因此這堂課會教你學習 Vuex 單向資料流向的結構處理,避免過去資料混亂,而無法駕馭除錯的情形。並且我們將串接 Google 提供的雲端服務 Firebase 去進行網站資料串接。Firebase 提供你儲存資料以及友善的 API,對於小型企業/個人都是很好的選擇方案。串接 Firebase API 並上線你的部落格,完成你的一個作品。

  • VueJs 基本介紹與運作。

  • Vuex 單向資料流的處理。

  • Firebase Cloud 串接 CRUD 。

  • 讓網站部署至 Firebase,正式上線。



關於這堂課

快樂學程式在台灣擁有超過 1000 人參與的在地社群活動。截至 2020 年我們已經舉辦超過兩年的社群與活動,每個月皆有程式思維相關的聚會與交流,深耕社群並參與推廣工程思維,讓非本科系的男孩女孩皆能一窺程式的風趣與培養解決問題的能力。這次與 Glove 推出這堂「用 VueJS 搭配 Firebase 實作一個部落格網站」,內容屬於入門並有完整串接實作,從 VueJS 到串接部署至 Firebase Cloud 等一個個逐步講解。做為上課學員的你可以在裡面跟著一起練習,反覆操作完成一個屬於你的 VueJS 部落格:)

Who this course is for:

  • 對前端開發有興趣,並有聽過 VueJS
  • 對完整建立一個部落格有興趣
  • 嘗試接觸串接 API 對完成一個作品動力

Instructor

Happy Coding 快樂學程式
Grow up digital skills like an Engineer. 建立工程思維,提升數位能力第一站。
Happy Coding 快樂學程式
  • 4.6 Instructor Rating
  • 302 Reviews
  • 748 Students
  • 7 Courses

Using Engineering Thinking build up digital nomads skill.


快樂學程式成立於 2017 年,希望能提供給非本科系與相關領域的學生以及工作者們一個友善學習程式的平台,幫助大家培養工程思維以及邏輯思維,運用在解決工作上以及生活中的各種大小事。

工程思維為建立解決方法中的邏輯化思考。例如處理你的支出報告,你減少非需要支出,增加你的可動用資產。這時候會需要紀錄你每月份的支出與收入並在適當的軟體工具上建立你的收支紀錄,透過收支紀錄組織每月的標準支出。可以從圖像流程化列點出步驟、要點、目標後進而找出改善方式,以達成解決問題的方法。

建立良好的工程思維會幫助你更好、快速地組織出問題的解決辦法。運用系統化思考與流程化條列,提升你溝通與組織問題的能力,在數位化時代是相當重要的技能,同時,我們將推出更多的課程幫助提升數位能力。

提升數位化專長不再只是空談。快樂學程式舉辦每月的工作坊,並與社群舉辦主題社群小聚,讓喜愛網路生活與增加數位能力的數位住民更多的機會與舞台交流,快樂輕鬆地建立你的工程思維與解決問題的軟實力技能。

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.