vue

[Vue] Module not found: Error: Can't resolve ~

git 에서 pull 을 받고 npm run local 실행하니 오류 발생 !! 모듈을 찾을 수 없다고 나온다 [Error 내용] Module not found: Error: Can't resolve 'dayjs' [해결] npm install

[Vue] Vue 에디터 적용 하기 쉬운 Quill Editor

Vue 프로젝트 에디터 검토 및 적용 테스트 중 쉽게 적용이 가능하고 심플하면서 필요한 기능만 갖춰진 에디터가 검토되어 정리해보았다 (개인적으로 Toast Editor 보단 Quill Editor 가 좀더 쉽고 편하게 적용 가능 했던 것 같다) 1. Quill Editor Quill Editor는 모던 웹을 위한 오픈소스 WYSIWYG 에디터이다 오픈소스 에디터이며 modular 구조의 아키텍쳐이고 적용하는 웹페이지에 대해 커스텀마이징이 가능하도록 되어 있다 [Quil Editor 공식홈페이지] Quickstart - Quill Quickstart The best way to get started is try a simple example. Quill is initialized with a DOM ele..

[Vue] Component name should always be multi-word 에러 조치 방법

[Error 내용] [원인] vue에서 컴포넌트 명칭이 하나의 단어로 되어 있기 때문에 오류 발생 기본적으로 vue에서는 HTML 요소와 혼동을 일으킬 수 있는 요소를 제거하기 위해 컴포넌트 명칭을 2가지 이상의 단어 조합을 권장하고 있다 [해결] 단일 단어가 아닌 다중 단어로 적용하면 해결 /* BAD */ Vue.component('test',{ }) //GOOD Vue.component('BdTest',{ }) ESLint 를 설치한 상황에서 하나의 단어로 작성 하고 싶을 경우 lintOnSave의 속성을 false 로 변경 하여 단일 이름 에러 인식을 막을수 있다 const { defineConfig } = require('@vue/cli-service') module.exports = defin..

[Vue] Vue cli 최신 버전 업데이트 방법 ( vue create is a Vue CLI x only command and you are using Vue CLI x.x.x. You may want to run the following to upgrade to Vue CLI x)

vue create 명령어를 사용하려 하니 vue cli 설치시 2.9.6 으로 설치 되어 3. 의 명령어를 사용할수 없다 ㅠㅠ " vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. You may want to run the following to upgrade to Vue CLI 3 " [해결] 이전버전 삭제 하고 최신버전을 재 설치 하여 해결 하였다. 1. 이전버전 삭제 명령어 실행 npm unistall -g vue-cli 2. 최신버전 설치 명령어 실행 npm install -g @vue/cli

[Vue] Vue Bootstrap 사이트

Vue Bootstrap 사이트 https://cssauthor.com/vue-js-admin-templates/ 20+ Best Free VueJS Admin Templates » CSS Author A great list of top quality vue.js admin templates. vue.js is great for building fast, reactive admin dashboards. cssauthor.com https://bootstrap-vue.org/themes BootstrapVue Quickly integrate Bootstrap v4 components with Vue.js bootstrap-vue.org https://kr.vuejs.org/resources/themes.h..

Visual Studio Code(VS Code) 개발 하는데 유용한 플러그인

유용한 플러그인 Night Owl Material Icon Theme Live Server Prettier Auto Close Tag Atom Keymap Night Owl VScode 편집기의 배경색을 눈에 부담을 주지 않는 색깔로 변환하는 확장프로그램 Material Icon Theme 파일 아이콘 이미지를 바꿔주는 아이콘 테마 확장프로그램 Live Server HTML, CSS, JS 등의 내용을 실시간으로 서버를 띄워 화면에 표시 하는 확장프로그램 live Server 서버 열기 Alt + L, O / 닫기 Alt + L, C Prettier ESLint와 같이 오류내용을 잡아주지는 않지만 코드를 자동으로 형식화 하는데 있어서 매우 용이한 확장프로그램 Auto Close Tag 자동 닫는 태그를 ..

Vue 개발 환경 설정

Vue 환경설정 Chrome vscode node 설치 vue.js dev tools Chrome 설치 Chrome 웹브라우저 더욱 스마트해진 Google로 더 간편하고 안전하고 빠르게. www.google.com vscode 설치 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code...

[Vue] v-show vs v-if

v-show element 를 렌더링 후 조건에 따라 표기함 v-if 조건에 맞을 경우만 렌더링 후 표기 초기 렝더링시 조건이 false 면 아무작업도 하지 않으며 조건부 블록이 true 가 될때까지 렌더링이 되지 않음 v-show vs v-if v-show v-if 초기 렌더링 비용이 높음 전환비용이 높음 자주 전환될경우 사용하는게 좋음 런타임 시 조건이 변경되지 않을 경우 사용하는게 좋음

[Vue] computed 속성

computed 데이터 연산을 정의하는 영역 data() 속성값이 변했을 경우 이를 감지하고 자동으로 다시 연산 캐싱 (결과값을 저장) 주로 복잡한 로직 연산이 많은 로직을 처리할 때 많이 사용