Web17 [vue] fontawesome 사용(아이콘) * vue3버전 기준으로 cli로 설치하기 1. Add SVG Core npm i --save @fortawesome/fontawesome-svg-core 2. Add Icon Packages # Free icons styles npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/free-regular-svg-icons npm i --save @fortawesome/free-brands-svg-icons # Pro icons styles npm i --save @fortawesome/pro-solid-svg-icons npm i --save @fortawesome/pro-regular-svg-icons npm i --save .. 2023. 5. 1. [vue] 뷰 CLI / 뷰 로더 웹팩(Webpack) * 뷰 CLI - 뷰 코어에서 제공하는 CLI 도구 - 커맨드 창에서 명령어로 특정 동작을 수행할 수 있는 도구 - Node.js 필요 - package.json vue init 명령어로 프로젝트 생성시 package.json 파일도 생성 package.json파일은 프로젝트 정보를 담고 있는 설정파일이며 npm 명령어 및 뷰로 애플리케이션을 제작시 필요한 라이브러리 정보포함 - node_modules 웹팩을 빌드하기 위한 바벨(Babel) 및 여러가지 로더 웨백데브서버등 라이브러리 등이 설치된다 - 뷰 CLI 프로젝트 구성 1) 뷰 CLI 설치 npm install -g @vue/cli 2) 프로젝트생성 vue create 프로젝트명 3) 관련 라이브러리 설치 npm install 4) 프로젝트 구동 .. 2023. 4. 30. [vue] Form 입력 바인딩 (v-model) 폼 입력 엘리먼트의 상태를 JavaScript의 상태와 동기화해야 하는 경우가 많습니다. 값 바인딩을 수동으로 연결하고 이벤트 리스너를 변경하는 것은 번거로운 작업이다. v-model 1) v-bind:value + v-on:input 으로 1 -> 2 처럼 단순화 할수 있음 {{text1}} export default { name: 'App', data(){ return { text1:'', } }, methods:{//함수 onInput(e){ //v-on 핸들러는 네이티브 DOM 이벤트를 이자로 받는다 this.text1=e.target.value } } } 2) input, textarea, select 엘리먼트에 사용가능 용되는 엘리먼트에 따라 자동으로 다른 DOM 속성 및 이벤트 쌍으로 확장된.. 2023. 4. 29. [vue] vscode에 vue 셋팅 1. vue 프로젝트 생성도와주는 도구 설치 Terminal -> new Terminal npm install -g @vue/cli 2. extention 설치 - vetur 설치 - html css support - Vue 3 Snippets 3. 작업할 폴더 선택(workspace 성) file > open Folder 4. Terminal에 작성 프로젝트 만들기 C:\workspace_vue> vue create vuedongsan 이때 권한 문제로 에러나면 power-shell 관리자 권한으로 실행 $ Get-ExecutionPolicy //현재모드 확인 Restricted //풀기 $ Set-ExecutionPolicy -ExecutionPolicy Unrestricted //사용후 잠그기 $ .. 2023. 4. 27. 이전 1 2 3 4 5 다음
