Vue 動態切換元件 Vue 動態切換元件根據API取得的資料,動態切換元件。公司需要做模板切換,使用者可以在後台選擇layout1、layout2、layout3,分別會載入不同的layout 我們將API取得的資料放在sessionStorage.siteInfo裡,接著利用:is來做動態切換。 當是layout1時,便會切換layout-1的元件。比較特別的是,使用:is作法不需要在components再宣告一次 2020-02-04 vue
Vue 自動化導入 SASS Mixin 專案需要導入全域的 Mixin,以下會介紹要怎麼設定。專案使用的是Vue CLI 3建立的,因此需要自行建立一個vue.config.js檔來修改Webpack設定 在官方Vue文件的自动化导入說明,我們可以用style-resourses-loader來加載mixin、color等需要全域使用的CSS檔。 安裝 style-resources-loader1npm install style-r 2020-01-15
Docker Network Docker Network 筆記及練習 Docker Network 指令Container Port 與協議1docker port [container_ID] Docker Container IP顯示Container IP 1docker inspect [container_ID] 顯示所有 networks1docker network ls 篩選 network篩選bridge的 2019-12-08 Docker
MacOS 安裝 GVM 我用MacOS作業系統,iterm2、zsh環境,這邊做個紀錄 移除 Mac 官方 go 安裝檔我們要裝GVM,要先移除官方版本的GO 安裝檔,12rm /usr/local/gorm /etc/paths.d/go 安裝 GVMzsh1zsh < <(curl -s -S -L https://raw.githubusercontent.com/moovweb/gvm/master/ 2019-12-08 Go GVM
攻略:用Jenkins 從 0 到 1 打造強大的前端自動化工作流 這篇要教導你如何用CI/CD最可靠的工具:Jenkins來打造自動化的前端環境。會有這篇文章是因為公司的專案一直以來都是手動部署的方式,每當更新程式碼要測試時,都需要找有權限的同事幫忙手動部署,一天請同事幫忙五六次都會覺得不好意思。非常希望能夠每次在git push專案時,便會自動抓最新的程式碼並部署在測試伺服器上。 持續整合、持續交付(Continuous Integration & C 2019-12-06 自動部署 Vue Jenkins
Vue 元件之間的傳話筒 總整理 使用 Vue 建構網站,會越來越多元件,元件之間的溝通非常重要,常常需要傳遞資訊,讓彼此知道,讓資訊流通是一件非常重要的事! Props 父傳子 Parent => Child Communication $emit 子傳父 自定義事件,Child => Parent Communication Event Bus 類似於 Angular 2 的 services 用法 2019-03-12 vue
FrameWork 7 與 H5 邂逅的雷坑 環境配置:Vue + FrameWork 7 ,外面包一層Apk,做成App供手機測試以下將紀錄在實作時遇到的雷坑及如何解決的。 input 送出按鍵123456789101112131415161718192021<!-- 驗證碼: authenticationCode Start --><f7-list-item v-else> <f7-input typ 2018-12-13 Vue FrameWrok 7
快來架設超潮的NodeBB論壇在Heroku上 架設 NodeBB 論壇 在 Heroku 上This tutorial is introduce how to install NodeBB forum with MongoDB on MacOS and how to create in Heroku application.I look up official document, and step by step do it, but has 2018-12-10 node.js forum heroku
Vue 元件化概念 Vue 元件化概念 筆記 使用元件化切出複雜頁面 使用vue-router 做耊面 使用 vuex(資料中心)統一狀態更動 元件化 App.vue是大元件 什麼是元件化? 將網頁依照頁面、功能拆分 小至一個按鈕、大到整個頁面或程式 Single File ComponentVue 元件化概念 新增 / 使用元件 傳遞屬性 props 釋放事件 $emit 元件重用控制 :key 新增 / 使用 2018-11-26
JavaScript ES6 物件 Literal Upgrades:動態命名 ES6 Object Literal UpgradesES6 擴展:物件實體命名,透過[]的方式,可以帶入變數,讓程式碼更好維護、管理。 運用方式:像是對物件裡的屬性命名時,能夠用像是組字串的方式,讓命名名稱更有彈性。舉例:像是我建立一個tShirt的物件,裡面有屬性是Color:color色碼 1234567const key = 'pocketColor';const va 2018-11-25 ES6