본문 바로가기
반응형

분류 전체보기387

webpack, vue-loader, vue-style-loader -최신 프론트엔드 프레임워크에서 권장하는 모듈 번들러 - 서로 연관 있는 모듈 간의 관계를 해석하여 정적인 자원(javascript)으로 변환시켜주는 도구- 어플리케이션 동작과 관련된 여러 개의 파일(HTML, css, js, Image 등)들을 1개의 javascript파일로 변환하고, 이 js파일만 브라우저에서 로딩하면 어플리케이션이 실행되는 것 - Vue CLI를 통해 프로젝트를 실행하면 webpack 설정이 자동 적용되어 'npm run serve', 'npm rub build' 실행 시 webpack기반으로 동작한다. webpack 설정을 위해 webpack, webpack-cli, vue-loader, vue-template-compiler에 대한 npm install package.json .. 2023. 4. 24.
ref 태그내부에 ref로 이름을 붙혀주면 $.refs로 통제가 가능하다 methods:{ onSubmitForm(e){ this.$refs.answer.focus(); } } ** this.$refs.anwer.value = '1234' 와 같이 값을 직접적으로 바꿀경우 바인딩시 충돌이 일어남. refs를 필요이외에 남용하는건 좋지않다 2023. 4. 21.
vue.js 문서 https://vuejs.org/guide/introduction.html 공식문서 https://v2.vuejs.org/v2/style-guide/?redirect=true 스타일가이드 https://v2.vuejs.org/v2/cookbook/?redirect=true cookbook https://v3.vuex.vuejs.org/ vuex 공식문서 https://v3.router.vuejs.org/ vueRouter 공식문서 https://cli.vuejs.org/ vue CLI 공식문서 2023. 4. 21.
prevent submit의 기본 기능은 새로고침. 새로고침을 막기위해서 event.preventDefault(); 를 사용한다. methods:{ submitForm:function(event){ event.preventDefault();//submit의 기본동작인 새로고침을 막음 console.log(this.username, this.password); } } v-on: 에 사용할 .prevent를 사용하면 같은 결과를 얻을 수 있음 ** v-on:submit.prevent = @submit.prevent 2023. 4. 21.
싱글파일 컴포넌트 .vue 로 파일 생성 vue + tab 키로 기본 화면 구성 : HTML 컴포넌트 명명법 케밥케이스 파스칼 케이스 컴포넌트 파일 생성시 파스칼케이스 명명법을 사용하고 최소 두 단어 이상으로 작성. 2023. 4. 20.
Vue CLI(command line interface) VUE CLI 란? vue-cli 는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜을 수 있 https://cli.vuejs.org/ vscode - 터미널 node 설치확인 node -v npm 설치확인 npm -v vue-cli 설치 npm install -g @vue/cli 설치확인 vue --version vue프로젝트 생성 vue create 프로젝트명 프로젝트 생성후 해당 프로젝트 폴더로 이동, 명령어를 이용하여 dev 서버를 실행 cd 파일명 npm run serve 설치완료 페이지 (local.. 2023. 4. 20.
반응형

티스토리툴바