퇴근후서버다운 SIDNFT 퇴근후서버다운 SIDNFT

독립된 버튼 하나를 완성한 컴포넌트 소스이다.setup 방식 말고 defineComponent 방식이 없어서 하나 올려본다.특징to 를 받아서 페이지 이동시켜주는데press 애니메이션을 볼 수 있도록 setTimeout 으로 0.5초 딜레이를 줬다. CODEtemplate> div class="mt-8"> motion.button :while-hover="{ scale: 1.5, x: 50 }" :while-press="{ scale: 0.8 }" @click="delay_push(to)" class="tw_btn_detail" > more detail motion.button> div>template>script lang="ts">// c..

tailwind 필수 입니다.따라하기 영상: https://www.youtube.com/watch?v=7_mqThfC_yM 빼먹지 말아야하는게public/index.html 의 body 부분에이거 들어가야합니다.저는 어두운게 기본이라 dark 를 썼지만밝은게 기본이라면 light 를 쓰시면 됩니다. tailwind.config.js 에는  darkMode: "class",이거 들어가야합니다.media 는 사용자 윈도우즈 설정을 따르기 때문에 변경을 할 수 가없습니다. class 는 변경할 수 있습니다.나머진 영상 따라하시면 될 것 같구요옛날보다 더 쉬워졌군요좋네요

꼭 vue 가 아니더라도 붙일 수 있는거 같습니다. 영상: https://www.youtube.com/watch?v=a6XI8XAuORM&t=41s script 부분에import { Icon } from "@iconify/vue"; template 부분에는 이런식icon="" 부분에 들어갈 내용은 아이콘 브라우저에서링크: https://icon-sets.iconify.design/ Iconify - home of open source icons icon-sets.iconify.design 검색해야합니다.   아래쪽에 글씨가 나옵니다. 화살표의 버튼이 복사하기 버튼  제 사이트 하단에 가시면링크: https://apps.sidnft.com/이런식으로 그럴듯 하게 나옵니다.아주 좋네요

영상: https://www.youtube.com/watch?v=wvINSME-FMs작은 용량으로 좀더 웹페이지를 블링 블링 하게 만들 수 있습니다.좋은 라이브러리 같습니다. 개발문서: https://motion.dev/docs/vue Get started with Motion for Vue | Motion for VueGet started with Motion for Vue with our installation guide and interactive examples.motion.dev문서에는 NUXT 를 언급하는데 그런거 필요없고 import {motion} from "motion-v"랑              :while-hover="{ scale: 2.0 }"         :while-press..

문제인식2025-03-13 현재 최신 버전 으로 설치하면 동작이 안되네요1년전에 잘되던 과거버전으로 설치하기 위한 작업 순서를 정리하였습니다. 특정 버전 모듈 설치npm install -D tailwindcss@3.4.1npm install -D autoprefixer@10.4.18npm install -D postcss@8.4.35yarn installtailwind.config.js 파일 생성/** @type {import('tailwindcss').Config} \*/module.exports = {purge: ["./index.html", "./src/**/\*.{vue,js,ts,jsx,tsx}"],content: [],theme: {container: {center: true,},extend:..

소스코드: GoToTheMetaverse/vue-tutorial: vue 강좌 (github.com) 의 vue-1 폴더입니다. 영상: https://www.youtube.com/watch?v=52iKji9UK5U&t=619s MOTION ONE 튜터리얼 페이지: https://motion.dev/guides/quick-start npm 버전은 16을 사용했습니다. vue-cli 와 yarn 이 필요합니다. node 설치 -> yarn 설치 -> vue 설치 -> 코드의 모듈 설치 순으로 진행합니다. 매우 귀찮은 걸차 길뿐 방법은 어렵지 않으니 차근차근 해보시면 나중에 좋습니다. yarn 설치: npm install --global yarn vue 설치: yarn global add @vue/cli 코드..

출처: https://vueshowcase.com/question/vue-reactivity-transform-ref-not-defined vue reactivity transform $ref not defined vueshowcase.com 이 글을 보고 해결하였습니다. vite 필요한건 아니고 eslint 가 방해하는거 였군요 // .eslintrc.js module.exports = { // (생략) globals: { $ref: "readonly", $computed: "readonly", $shallowRef: "readonly", $customRef: "readonly", $toRef: "readonly", }, }; global 변수 등록 해서 해결했습니다..

https://www.youtube.com/watch?v=PPrUWISAbmU&t=1s 응용할 생각도 못했는데 이런 방법이 있군요 v-bind(변수) 를 이용하면 되네요 실시간으로 고쳐지니 부드러운 에니메이션은 힘들어도 어느정도는 가능합니다.