Vuejs實戰分享
使用Vuejs打造產品服務的dashboard
Cyril＠duolC

  • Software Engineer @ duolC

  • Backend, DevOps and Web Front-end

About me

Cyril Yu 

Agenda

  • What the problems we met
  • Why we choose Vuejs
  • How to build a dashboard using VueJS
  • Demo

Before Begining

  • 可能無法說明太多關於VueJS的觀念跟細節
  • 有些許的live demo

What the problems we met

  • 需手動執行Script替User建立帳戶
  • User無法自行管理或更新帳戶資訊
  • User即時取得API資料用量

都是人工處理.....

你(我)們不是提供SaaS的公司嗎...

What functions we nees?

  • 可讓客戶可以即時知道資料用量
  • 帳戶管理功能，提供開發所需要的資訊
  • 可在後台操作推播等功能的整合
  • 可在後台進行付款

We Need a dashboard！

另一個煩惱...

Why we choose VueJS

Angular React Vue
定位 全功能型JS框架 View View
Size 566kb 132kb 22.86kb min+gzip
執行速度 一般 快 快
套件 多 一般 較少
學習成本 一般 較高 低

簡介Vue.js特性

Composing with Components

Data Binding

Vuex

How to build a dashboard

using VueJS

安裝vue-cli

建立專案

建立需要的Components

設置Vuex

* getters

   取得state資料

* mutation-types

   定義狀態變更的事件及名稱

* modules

   模組

* actions

   撰寫狀態變更時的動作

* index.js

   初始化Vuex

DEMO

Thank you for listening

Link: http://api.diuit.com/jobs.html

使用 Vue.js 打造產品服務的 dashboard

By Cyril Yu

Made with Slides.com

使用 Vue.js 打造產品服務的 dashboard

JSDC - 使用 Vue.js 打造產品服務的 dashboard

  • 2,866

More from Cyril Yu