TSUNG-MING TSAI

@Vin27

Joined on Jun 23, 2019

  • 一開始是跟著VueMastery一個教學做的project,上完後覺得裡面用的HTML內建drag and drop API太複雜,不好用且難維護,就試著抽換成vuedraggable,順便學了Tailwind.css,意外發現還蠻好用的。 另外也整理vue-fontawesome的使用方法。 github link 在Vue專案中使用vuedraggable Doc: vuedraggable vuedraggable 是一款以Sortable.js為基礎建立的Vue套件,輕鬆讓你實現拖拉功能並同步變動data,可以到他的playground去玩看看 install
     Like 1 Bookmark
  • 使用套件 NProgress npm install nprogress include css 在main.js放NProgress的css檔 /main.js import 'nprogress/nprogress.css' 有三種方法使用NProgress.js
     Like 1 Bookmark
  • 先說結論:無法同時使用ESlint和Prettier,ESlint是調整coding的style,Prettier是用來規範coding的嚴謹度,兩者做的事會有衝突。 問題:同時使用ESlint和Prettier,會出現格式衝突 在Vue專案中,想使用vue/max-attributes-per-line,但會和Pretter衝突,造成每次存擋時,都無法如預期效果。 expected when formatOnSave: <template> <div v-show="test" v-if="on"
     Like 2 Bookmark
  • 專案使用Heroku的mysql作為db,上傳步驟如下: 建立app : heroku create <project_name> 建立 dynos,啟動 Heroku: heroku ps:scale web=1 建立 ClearDB 資料庫: heroku addons:create cleardb:ignite 修改本地 config.json: "production": { "use_env_variable": "CLEARDB_DATABASE_URL" }
     Like  Bookmark
  • Goals of writing tests 撰寫測試的目的是什麼?大致可歸類以下三點 Boosted Confidence: 在一個你沒碰過的專案中,有一個測試包就像有一個前輩在隨時檢查你的code,確保你不會一新增功能就破壞程式碼。 Quality Code: 當你在撰寫component testing卻發現困難重重, 那可能表示你的compoent code寫得有問題,需要重構了。 因此,撰寫測試也可以確保你的code有一定的quality。
     Like 1 Bookmark
  • Why Animate 你可能知道動畫效果可以提升網站的UX,但網站中哪些地方該使用?又如何在Vue app裡使用? Directing Focus 我們每天收發eamils、用line、滑FB or IG,接收數以萬計的資訊,當使用者來到你的網站時,很可能腦容量已經接近負荷,作為一個使用者介面設計者,此時最重要的就是迅速抓住使用者的注意力,並且導引他們以最有效率的方式使用我們的產品。 Inspiring Action 當使用者來到你的網站時,你希望他們做的第一件事是什麼?可能是看一行slogan、或是點某個按鈕,透過有效地使用animation,可以移除容易讓使用者分心的元素,進而促使他們做出你希望的操作 如同以下的例子,藉由button的動畫效果,我們可以快速抓到使用者的注意,並且讓他們在不需動腦思考我該如何使用這個網站的情況下立刻點選button,開始進一步與我們的產品互動。
     Like 1 Bookmark
  • history mode 和 hash mode 不同處 建立專案後,打包專案及使用python 建立server npm run build cd dist python -m SimplpeHTTPServer 3000 //mac 內建python 可建立小型server 前往localhost:3000及貼上localhost:3000/about試試 server沒有在router做對應的路徑的話,使用history mode,部署上去後,使用者直接貼路徑會找不到(根路徑以外的網址,e.g.貼上localhost:3000/about,會404,因為路由找的是/about這個檔案
     Like  Bookmark
  • 命名 有兩種方式 kebab-caseVue.component('my-component-name', { /* ... */ }) PascalCaseVue.component('MyComponentName', { /* ... */ }) 使用PascalCase命名的話,在其他地方使用此component,兩種命名都可以指定成功,也就是說命名為MyComponentName,則my-component-name和MyComponentName都可以使用。但若要在DOM中直接操作,只能使用kebab-case命名的components。 Components Registration
     Like  Bookmark
  • Filters是Vue提供一個簡易處理文字格式的方法。 e.g.轉換時間格式、大小寫、貨幣、千位加逗號...等等 局部註冊 直接寫在script中 Example.vue <template> <p>{{ comment }}</p>
     Like  Bookmark
  • Mixins是一個把元件中重複的功能組合起來,重複使用的方法,可以減少元件中reqpeat code。 通常會放在src下的Minxins file,建立js檔,e.g. exampleMixin.js export const exampleMixin = { created() { console.log('Hello from the mixin!') } }
     Like  Bookmark