vue 框架教育訓練

1. VUEBMS 的前端技術架
構

2. VUEBMS 的前端技術架構
VUEBMS 功能
▸ 透過 Wizard 建立 db 詢功能查
▸ 依照權限管理使用者使用功能
▸ 提供套用樣板或產生實體 案自由修改檔

3. VUEBMS 的前端技術架構
使用技術
▸ 網頁基本技術 :HTML5+ES6+SASS(SCSS)
▸ 前端框架 :vuejs+vuex+vue-router
▸ 前端 UI 框架 :Element UI
▸ 任務管理 :gulpjs

4. VUEBMS 的前端技術架構
版本控制
▸ master <--> 正式機 ec
▸ stage <--> demo 機
▸ develop <--> rd

5. VUEBMS 的前端技術架構
工作目錄
▸ config: 設定主機環境
▸ docs: 框架說明文件
▸ gulp: 工具指令集
▸ src: 原始程式碼
▸ static: 靜態 案檔
▸ www: 編譯產生的 案檔

6. VUEBMS 的前端技術架構
SRC 工作目錄
▸ conf: 設定檔
▸ core: 核心 案檔
▸ lang: 多語系
▸ store: 狀態管理
▸ utils: 通用物件
▸ views: 所有頁面元件

7. VUEBMS 的前端技術架構
系統提供的工具
▸ 開發模式 gulp
▸ 建立 頁面元件 gulp add-page
▸ 建立 api 連結 gulp add-api
▸ 發布到網站 gulp dev-deploy
▸ 其他功能參考 文件 docs/gulpCmdList

8. VUEBMS 的前端技術架構
設定檔
▸ routes.json
對應 vue-router 設定格式
▸ apis.json
透過 this.fetch(‘getInfo’) 取得 api 資料

9. VUEBMS 的前端技術架構
物件繼承
▸ 基本元件 vComponent
▸ modle 元件 vModal
▸ 詳細功能參考文件

10. VUEBMS 的前端技術架構
程式開發原則
▸ 不要想去控制網頁上的 DOM
▸ 程式只負責處理資料的變化 ,
▸ DOM 物件會自動依照資料異動而改變
▸ 不同的物件溝通 , 不要有太多的耦合性
▸ 透過事件的發送 (emit) 與接收 (on) 做溝通

11. VUEBMS 的前端技術架構
DEBUG 工具
▸ Chrome devTool
▸ Chrome vueTool extension
▸ vueTest

12. VUEBMS 的前端技術架構
作業流程
▸ 由 git clone 並建立個人工作的 branch
▸ 進入開發 gulp
▸ 建立基本元件 gulp add-page
▸ 發布到主機 gulp dev-deploy

13. VUEBMS 的前端技術架構
NEXT
▸ API Server 介紹
▸ JavaScript
▸ vue 程式教學