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 程式教學