Vue開發小技巧

攻城獅Lee丶發表於2019-10-14

Vue 3.x 的Pre-Alpha 版本。後面應該還會有 Alpha、Beta 等版本,預計至少要等到 2020 年第一季度才有可能釋出 3.0 正式版;
所以應該趁還沒出來加緊打好 Vue2.x 的基礎;
Vue基本用法很容易上手,但是有很多優化的寫法你就不一定知道了,本文從列舉了 36 個 vue 開發技巧;
後續 Vue 3.x 出來後持續更新.

1.require.context()

1.場景:如頁面需要匯入多個元件,原始寫法:

import titleCom from '@/components/home/titleCom'
import bannerCom from '@/components/home/bannerCom'
import cellCom from '@/components/home/cellCom'
components:{titleCom,bannerCom,cellCom}

2.這樣就寫了大量重複的程式碼,利用 require.context 可以寫成

const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
  const name = path.basename(key, '.vue')
  modules[name] = files(key).default || files(key)
})
components:modules

這樣不管頁面引入多少元件,都可以使用這個方法

3.API 方法

相關文章