JS/vue.js
-
에러4(Component name should always be multi-word)JS/vue.js 2022. 3. 14. 11:31
Component name "component" should always be multi-word. Eslint 에러. vue에서는 컴포넌트 이름을 multi-word로 단어와 단어의 조합으로 네이밍하는걸 추천한다. 따라서 에러를 꺼버리고 싶을 때 package.json 파일에서 "eslintConfig": { "rules": { "vue/multi-word-component-names": 0 } } 이렇게 "vue/multi-word-component-names": 0 추가해주면 된다.
-
vue7(DevExtreme-DataGrid이용하기)JS/vue.js 2022. 3. 11. 18:27
dev-grid를 사용하려 하는데 참고할게 공식문서밖에 없다. https://js.devexpress.com/Documentation/Guide/Vue_Components/DevExtreme_Vue_Components/ DevExtreme Vue Components: DevExtreme - JavaScript UI Components for Angular, React, Vue and jQuery by DevExpress 21.2 Thank you! We appreciate your feedback. js.devexpress.com 공식문서 참고하기 data파일을 연결하면 자동으로 table을 만들어준다. 다양한 옵션이 있어서 편하고 쉽게 사용 가능한 라이브러리. 1. 먼저 json형식의 data 파일 만..
-
vue6(vue-router)JS/vue.js 2022. 3. 11. 15:22
VUE는 SPA! 여러 화면을 하나의 페이지 안에서 제공해준다. 따라서 화면마다 고유한 식별자를 기반으로 화면을 렌더링 해야함 vue-router라는 라이브러리를 사용해서 URI를 고유식별자로 사용해줌 router 예제 : home, about, contacts 세개의 라우터를 만들어서 연결 1.src/components 폴더에 Notice, About 컴포넌트 만들기 2.App.vue에 router-link, router-view 작성 (&&자리에 라우터 객체에서 매핑한 컴포넌트가 들어옴) //App.vue 공지 ABOUT && 3.Main.js에서 1) 컴포넌트,router Import 해주기 2) VueRouter 쓸게여 3) Router 인스턴스 생성 → path별로 보여줄 컴포넌트 매핑한 라우..
-
vue4(router childeren-라우터 중첩)JS/vue.js 2022. 3. 10. 16:26
router 중첩 : 상위-하위 컴포넌트 설정해서 고정적인 UI 부분은 상위 컴포넌트에 두고, 변동있는 UI부분은 하위(children) 컴포넌트로 둬서 필요한부분만 렌더링!효율적임 { path: '/notice', component: () => import('./views/notice'), children: [ { path: 'chart', component: () => import('./views/notice/chart'), { path: 'table', component: () => import('./views/notice/table'), ] },
-
vue.3(v-i18n)JS/vue.js 2022. 3. 10. 15:01
i18n : 국제화(다국어) 지원해주는 오픈 소스(It easily integrates some localization features to your Vue.js Application.) →json { 내용 : 해당 언어로 쓰인 내용 } 형식 →언어별로 (ko.json, en.json) 파일 작성 //en.json const messages = { en: { message: { hello: '{msg} world' } } } //app.vue {{ $t('message.hello', { msg: 'hello' }) }} //위치 //입력값 hello world //main.js new Vue({ store, router, i18n, render: h => h(App) }).$mount('#app') ma..