Programming/Vue.js 썸네일형 리스트형 [VUE] VUE 프로젝트 구조 Npm을 이용한 Vue 설치후 프로젝트 구조 잡기 npm을 이용하여 vue를 사용할때 3가지 파일로 나눠서 코딩한다. main.js는 Vue 인스턴스를 로딩하기 위해서 사용한다. .vue 파일들은 각각 vue에 대한 Component들이다. .html 파일은 컴포넌트가 삽입될 HTML 템플릿이다. Vue 컴포넌트 파일 구조 이해하기 .vue로 끝나는 파일은 컴포넌트를 만들기 위하여 사용되는 자바스크립트 코드이다. .vue파일은 크게 3가지 부분으로 나눠진다. template : 템플릿은 해당 Component를 구성하는 실제 컴포넌트에 대한 HTML 코드를 작성하는 부분이다. script : 실제 해당 컴포넌트에 대한 data와 실제 동작을 정의하는 JS 파일이다. style : template에 대한 .. 더보기 [VUE] 프로젝트 생성 후 <router-view> 에러 나는 현상 Vue프로젝트 설치할 때 선택한 Eslint 관련해서 에러인것 처럼 잡는 것입니다. 실제로는 에러가 아니지만요. Vue 2.0 버전에서는 template 태그 안에 반드시 루트 태그(div 같은)가 있어야 에러가 아니였습니다. 에러메시지 : The template root requires exactly one element vue/no-multiple-template-root 그런데 Vue 3.0 부터는 루트 태그가 없어서 에러가 아닙니다. Eslint가 아직 Vue 3.0에 바뀐 내용을 모두 적용하고 있지 않아서 에러인것처럼 빨간색 줄이 가는 현상입니다. 빨간줄을 없애고 싶다면, template 태그 안에 작성된 html 코드 최상위에 div 같은 루트 태그를 사용하시면 됩니다. 더보기 [VUE] VUE 설치 과정에서 에러 발생 시 재설치 - vue-cli 삭제 npm uninstall vue-cli -g - vue-cli 설치 npm install -g @vue/cli - vue-cli 업데이트 npm update -g @vue/cli - vue 버전확인 vue --version 더보기 [VUE] ui 개발을 위한 Vuetify plugin 설치 빠른 설치환경을 위해 Vue CLI 를 사용하고 프론트 디자인은 전문 영역이 아니기때문에 Vuetify 를 사용한다. - vue 3.x 버전 프로젝트에서는 설치가 되지 않을 수 있다. Brower 지원 확인 vuetifyjs.com/en/getting-started/browser-support/ Browser support Vuetify is a progressive framework that supports all evergreen browsers and IE11 / Safari with polyfill. vuetifyjs.com 설치 / 삭제 설치를 위해서 필요한 것 Vue CLI 1. 설치 - 아래 두 명령어중 하나로 설치 npm install -g @vue/cli yarn global add @v.. 더보기 [VUE] CLI V3 프로젝트 개발 시 유용한 vscode 확장프로그램 목록 1. Vetur - Pine Wu Vue.js 코드 문법강조, 자동완성, 디버깅, Lint 등 지원 2. Vue 3 Snippets - hollowtree Vue.js 컴포넌트 속성 지원 및 자동완성 지원 Previous imageNext image 3. Vue Peek - Dario Fuzinato 컴포넌트 추적 4. ESLint - Dirk Baeumer, Prettier - Prettier ESLint : 잘못된 코드 스타일로 인해 에러가 나지 않도록 코드 문법을 잡아주는 문법 검사기 Prettier : 코드 스타일을 정리해주는 도구 5. DotENV env 환경 파일 syntax 6. Debugger for Chrome - Microsoft VSCode 안에서 디버깅을 도와주는 .. 더보기 [VUE] cli 3프로젝트 8080 포트 변경 Vue.js 를 시작하면 8080 포트로 서비스가 시작 됩니다. 8080 말고 다른 포트를 변경하고 싶을때는 package.json 파일을 아래와 같이 수정합니다. --port 8504 : 포트를 8504로 변경했습니다. npm run serve 명령어를 실행하여 포트 변경 확인 더보기 [VUE] VUE CLI 프로젝트 생성 시 권한이 없다는 에러 해결 윈도우 환경에서 VUE 프로젝트를 생성시 혹은 VUE 버전을 확인 할 때 권한이 없다면서 명령어가 실행되지 않는 경우를 볼 수 있다. 그럴때는 window power shell 을 관리자권한으로 실행해서 Set-ExecutionPolicy -ExecutionPolicy Unrestricted 구문을 실행해주면 된다. 사진 참조 더보기 [Vue] Vue.js 설치하고 실행하기 [ 개발 환경 설정 ] - Visual Studio Code : 자신이 사용하는 코딩 편집 프로그램. - Vue.js devtools : 크롬 브라우저 확장프로그램 - Node.js : 구글 크롬의 JavaScript 런타임. JS를 웹브라우저에서만 쓰는 것이 아닌 나의 컴퓨터에서 다양한 용도로 확장하기 위해 만들어진 것. - npm : 노드 패키지 관리자 - Vue CLI : app작성을 위한 기본틀 제공 도구 1. 코딩 편집 프로그램 설치 및 설정 : Visual Studio Code 평소에 사용하던 코딩 편집프로그램을 준비. 만약 없다면 코딩 편집 프로그램을 설치. 기존에 VSCode를 사용했기에 추천해드립니다! https://code.visualstudio.com/ Visual Studio Cod.. 더보기 [Vue.js]뷰 인스턴스 생성, 개념 1. 뷰인스턴스 : new Vue() - Vue를 생성자라고 함 - 생성자를 생성하는 이유 : 뷰로 개발 할 때 필요한 기능들을 재정의하여 편리하게 사용하도록 하기 위해서 2. 뷰인스턴스 옵션 속성 - el 속성 : id 속성 - data 속성 : el 속성에 매칭되는 data값 지정 가능 -- #app (id속성)dms 돔요소중 app이라는 아이디를 가진 요소(el속성)를 의미 - 그 외에도 -- template : 화면에 표시할 , html , css 등의 마크업요소를 정의하는 속성 -- method: 화면 로직 에어와 관계된 메서드를 정의하는 속성. ex) 마우스 클릭 이벤트 -- created : 뷰 인스턴스가 생성되자마자 실행될 로직을 정의할 수 있는 속성 예제1) ----------------.. 더보기 [Vue.js] vue-cli3 proxy 설정 vue-clli가 3으로 버전업이 되면서 프록시 설정부분이 살짝 달라졌습니다. 우선 설정파일이 없어서 생성해야 합니다. root 폴더에 vue.config.js 라는 파일을 만들고'use strict' module.exports = { devServer: { proxy: { // proxyTable 설정 '/api': { target: 'http://localhost:8080', changeOrigin: true } } } } 위와같이 설정해주시면 됩니다. 경로와 target을 설정해주시고 다시 실행하시면 정상동작을 확인 할 수 있습니다. 더보기 이전 1 다음
