Vue 3 Forms : Auto-importing components

Finally, we import upperFirst and camelCase from Lodash, a JavaScript library that provides utility functions for common programming tasks.

• upperCase converts the first character of a string to upper case
• camelCase converts a string to camel case (camelCase isWritten likeThis)

npm i --save lodash

Lodash 의  upperFirst, camelCase functions  이  BaseInput.vue and base-input.vue , or  baseInput.vue 로 만든 file 을  BaseInput.vue 로 바꾸어 버린다.

 

/^\.\/(.*)\.\w+$/

• 맨앞 /  맨뒤 / :  정규표현식의 시작과 끝을 의미함
• ^\.  : start w/ .  (current directory)
• \/  :   char /
• (.*)  : 문자가 무한정 반복됨.
•  \. : . 을 의미함
• \w+ :  문자 혹은 숫자가 1번이상 반복
• $ : 마지막을 의미

'./BaseInput.vue, './BaseSelect.vue 와 같은 형태임.

 

main.js

import { createApp } from 'vue'
import App from './App.vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  './components',
  false,
  /Base[A-Z]\w+\.(vue|js)$/
)

const app = createApp(App)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)

  const componentName = upperFirst(
    camelCase(fileName.replace(/^\.\/(.*)\.\w+$/, '$1'))
  )

  app.component(componentName, componentConfig.default || componentConfig)
})

app.mount('#app')

 

아래에 동작하는  source code 가 있다

https://github.com/pidokige02/Vue-3-Form-demo

GitHub - pidokige02/Vue-3-Form-demo