Skip to content

VueJS & Bootstrap vue

Jump to bottom
jaeseok.an edited this page Apr 1, 2020 · 20 revisions

시작

  • vuecli 로 project 생성
    • vue create 프로젝트
  • 최초 생성시 이미 service가 setup
    • package.json 생성
      • npm run server => vue-cli-service serve
    • public
      • index.html 이 project entry html 파일
    • main.js 가 project entry javascript 파일
      • App.vue(최초 vue파일)을 import한다.
      • new Vue(App)를 수행한다.
    • Component연결
      • App.vue의 template에 다른 component를 import해서 사용
    • 최종 build후에는 index.html에 main.js + bundling된 다른 vue파일들이 import되어 rendering된다.
  • 상세
    • template
    • export default
      • name, 사용중인 component, method, data() function, props을 추가
      • 상위 component에서 bind해야하는 변수로는 props를 이용한다.
      • export default {
name: 'home',
data() {
    return {
      showPetForm: false,
      formData: {
        name: '',
        age: 0,
        species: null
      }
    }
},
computed: {
 ...mapGetters([
 'animalsCount',
 'getAllCats'
 ])
},
methods: {
  togglePetForm() {
      this.showPetForm = !this.showPetForm
  },
  handleSubmit() {
  }
 }
}
    • computed method
      • 변수가 변경시에만 재계산
    • watch method
      • prop data가 변경 된 경우
    • slot 개념
  • 동작 추정
    • vue파일은 내부적으로 javascript로 compile되어 다른 javascript에 import
    • 각 component의 template/script/css section이 javascript의 구성으로 모두 변환
    • 각 해당 component객체가 상위 vue파일에 merge
  • export default 사용
    • 해당 vue의 정보와 사용중인 components dependency를 등록해준다.
  • model property
    • 사용자 정의 v-model 생성. 특정 prop 변수의 event를 정의
    • Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
   },
  props: {
    // 다른 목적을 위해 `value` prop를 사용할 수 있습니다.
    checked: Boolean,
   value: String
  },
  //
 })
  • "$t"
    • localization시에 특정 문자열에 binding
    • <i18n>
{
    "en": {
        "form": {
        "title": "Login to your account",
    ...
       "submit": "Login"
        }
   },
   "ko": {
       "form": {
        "title": "계정에 로그인해 주십시오",
       ...
       "submit": "로그인"
   }
 }
}
</i18n>
  • this.$refs

config with webpack

  • vue.config.js에 각 vue project에 대한 동작 정의. webpack에 대한 내용도 추가 
    •  module.exports = function generateVueConfig(serviceName) {
   const publicPath = `/view/${serviceName}`;
   return {
      pluginOptions: {
     i18n: {
       locale: 'en',
       fallbackLocale: 'en',
       localeDir: 'locales',
       enableInSFC: true
     }
   },
   publicPath,
   devServer: {
      proxy: 'http://localhost:5000'
   },
   configureWebpack: {
     resolve: {
       alias: {
         'vue$': require('path').resolve(__dirname, '../../node_modules/vue/dist/vue.runtime.esm.js')
       }
     },
     plugins: [
       appManifestPlugin(publicPath),
       new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
       ],
     }
   }
  };
  • form에 대한 v-model 적용- 각 form element에 대해 다른 propoerty와 event를 사용한다.
    • text and textarea elements use value property and input event;
    • checkboxes and radiobuttons use checked property and change event;
    • select fields use value as a prop and change as an event.

Bootstrap-vue

  • vue에서 import를 해주고 빌트인 bootstrap component를 사용한다.

typescript 지원

  • vue create + 프로젝트시 typescript를 체크하면 됨
    • 이 때 class지원 여부, route 지원 여부 지정가능

eslint

  • Vuejs 파일에 대해 eslint indent 무시 
    • "vue/script-indent": ["error", 2, {
"baseIndent": 0,
"switchCase": 0,
"ignores": []
}]

event

  • v-on:이벤트이름
    • v-on:click="함수()"

event 전파 막기

  • @click.stop
    • stop event가 상위 DOM으로 전파되는 것을 막는다.
  • 해당 DOM의 event를 막으려면 event.preventDefault()
  • 둘가 막으려면 evnet.preventDefault()와 event.stopPropagattion() 모두 막아야 한다.

Vee-Validate

  • vuei18n과 함께 동작 하기 위해 rule 추가시 message항목에 다음과 같이 사용 message: (_, values) => String(i18n.t('validations.exist_pair', values))

  • locale 적용

    • 참고 - https://logaretm.github.io/vee-validate/guide/localization.html#using-the-default-i18n
    • locale json 파일로 존재
      • vee-validate/dist/locale/en.json [ko.json]
    • json loading 할수 있으나 typescript에서 실패함
      • json을 static하게 module로 import 하는 방법 존재하나 typescript에서 잘안됨. 여러방법 시도후 실패
      • json module로 loading 가능 옵션 
           "esModuleInterop": true,
   "resolveJsonModule": true,```
      • valid한 json을 lint하지않게 해야함. lint 에러 난리남. 결론은 lint option 먹이는데 실패 
        "linterOptions": {
"exclude": ["*.json", "**/*.json"
 }
      • locale을 모듈로 등록해야 한다고 함 
        // vee-validate.d.ts (파일추가 필요)
declare module 'vee-validate*';
      • 직업 en.json 등을 프로젝트내에 i18n을 위한 src/local/en.json 에 직접 추가함. loading은 i18n message loading에 이미 포함됨
        • 단 아래 구조를 지켜야 함 
            "validation": 
      "alpha": "The {_field_} field may only contain alphabetic characters",
     ...
    }

  • typescript rule 정의 파라미터 style

extend('exist_pair', {
  params: ['other'],
  validate: (value, { other }: Record<string, any>) => {
    if (!Boolean(value) && Boolean(other)) {
      return false;
    }
    return true;
  },
  message: (_, values) => String(i18n.t('validations.exist_pair', values)),
});

주의사항

  • optional field는 empty일 때 validate안함
  • 다른 필드가 존재하면 required로 동작 처리
    • required_if 사용

test

Clone this wiki locally