반응형 Develop/Vue5 vue progress bar 만들기 안녕하세요. 오늘은 start 버튼을 누르면 progress bar가 차오르는 것을 만들어 보려 합니다. (아래 그림 참조) 게임을 만들거나 로딩 시간등에 사용하면 좋을것 같습니다. 코드만 있으면 되는 분들은 아래 codepen 사이트에서 소스만 긁어 가시면 됩니다 https://codepen.io/makegametogether/pen/oNENoQy Vue Simple progress bar ... codepen.io Progressbar 주요 코드 설명 start stop 전체 적인 vue 구성입니다. 두 개의 버튼과 progress bar로 이루어져 있습니다. 이때 각 버튼은 progress bar를 시작 및 멈추는 역할을 하고 있습니다. progress bar에 대한 css 입니다. progress.. 2022. 5. 1. html 카카오톡 공유 api 개발하는 방법 안녕하세요 개발자 망고 입니다. 오늘은 제가 밸런스게임 웹 페이지를 만들고 그걸 공유할 방법이 필요해서 카카오톡 공유 api를 사용해서 테스트를 해봤는데. 기능이 적용하기 어렵지 않고 잘 동작하는건 확인했습니다. 하지만 사람들이 공유를 잘 누르지는 않더라구요...ㅠㅠ 암튼 카카오톡 공유 api 사용하는 방법을 post 해보겠습니다. 1. 목표 위와 같은 아이콘을 만들고 카카오 아이콘을 클릭했을때 아래과 같이 공유하는 화면이 뜨도록 하는게 목표 입니다. 2. 카카오톡 버튼 만들기 사실 중요한 부분은 아닙니다. 어떻게든 버튼을 만들고 그것을 클릭했을 때 함수가 실행 되도록만 하면 됩니다. 아래 코드는 위 이미지에 대한 코드 입니다. (언어는 vue로 작업했기 때문에 click에 대한 부분은 변.. 2022. 4. 28. [vuejs] vue multi page build vue는 기본적으로 spa 프로그램이지만 실제 사용할때는 페이지를 분리해서 사용해야 될 때가 있습니다. 예를 들어 로그인 페이지등을 분리하는 경우등이 있을 것 같습니다. 아무튼 그 방법을 아래에서 살펴 보도록 하겠습니다. Vue Multi page 만들기 목표 이 페이지의 목표는 아래와 같이 두 개의 html 파일을 만들어 - xxx.com - xxx.com/plusminus 두개의 주소로 접속하게 하는 것입니다. vue.config.js 수정 module.exports = { pages: { default: { entry: 'src/main/main.js', template: 'public/index.html', filename: 'index.html' }, plusminus: { entry: 'src.. 2022. 3. 6. Vue와 robots.txt 1. robots.txt는 언제 필요한가? 네이버 및 구글에서 검색되기 위해 google search console등에 등록할 때 필요 2. vue에서 robots.txt 등록방법 일반 html 프로젝트의 경우 최상위 폴더에 robots.txt를 넣으면 되듯이 vue 산출물인 dist 폴더에도 robots.txt가 나오면 된다. 즉 public 폴더에 robots.txt파일을 넣으면 된다. 그리고 빌드 하면 dist 폴더 아래 robots.txt가 생성된걸 확인 할 수 있다. 다른 Post 보기 2022. 2. 16. 이전 1 2 다음 반응형
