Vue 활용 방법Nuxt의 js 플러그인 - [Vue Aweasome swiper]
16918 단어 vuejamstackjavascriptnuxt
소개하다.
계산 기술에서 플러그인은 소프트웨어 구성 요소로 사용자가 컴퓨터 프로그램이나 사이트에 특정한 기능을 더욱 쉽게 추가할 수 있게 한다.예를 들어 제품을 판매하고 기부를 받거나 사이트/인터넷 응용 프로그램에 회전목마를 추가하려면 복잡한 코드를 많이 작성하지 않고 더 빨리 처리할 수 있는 플러그인이 필요하다.
누크스.js는 Vue 기반 프런트엔드 프레임워크입니다.js는 서버 사이드 렌더링 (SSR), 자동 생성 루트, 개선된 메타데이터 관리, SEO 개선 등 좋은 개발 기능을 제공합니다.
이 문서에서 Vue를 사용하는 방법을 보여 드리겠습니다.Nuxt의 js 플러그인입니다.js는 Nuxt가 Vue를 기반으로 구축된 프런트엔드 프레임워크라는 것을 완전히 이해합니다.js.
Vue 플러그인
Vue.js 플러그인은 응용 프로그램에 전역적인 기능을 추가하는 강력하고 간단한 방법입니다.응용 프로그램 범위의 구성 요소를 나누어 주는 것부터 응용 프로그램에 루트와 변하지 않는 데이터 저장을 추가하는 등 다양한 용도가 있다.
Vue에서 Vue 플러그인을 사용하는 것은 훨씬 쉽다. 문서에서 이 점을 정확하게 설명했기 때문에,nuxt에서는 초보자에게는 좀 까다로울 수 있지만, 본고에서는 설치vue-awsome-swiper plugin를 통해nuxt에 Vue 플러그인을 설치하는 여러 가지 방법을 설명할 것이다.
Nuxt 응용 프로그램 만들기
우선, 우리는 nuxt 프로그램을 만들어야 한다. 만약 당신이 nuxt 프로그램을 가지고 있다면, 플러그인을 설치하는 방법을 배우고 싶을 뿐이다. here 를 누르면 된다.
우리는 비계 도구
create-nuxt-app를 사용하거나 Nuxt 프로그램을 처음부터 만들 수 있습니다.시작하려면 선택한 패키지 관리자를 사용하여 다음 프로그램을 실행합니다.
npx create-nuxt-app <project-name>
//or
yarn create nuxt-app <project-name>
//or
npm init nuxt-app <project-name>
<project-name>.설치가 완료되면 이름, Nuxt 옵션, UI 프레임워크, TypeScript, linter, 테스트 프레임워크 등 일련의 문제를 설정하고 개발하는 데 도움을 줄 것입니다.
이 문제들의 답안은 대부분 개인의 선호이다.다음은 이 문서의 구성입니다.
완료되면 터미널에서 다음 명령을 실행합니다.
$ cd <project-name>
$ npm run dev
Vue awesome swiper 설치
이 플러그인은 선택한 패키지 관리자에 Thread 또는 npm을 사용하여 설치할 수 있습니다.
npm install swiper vue-awesome-swiper --save
//or
yarn add swiper vue-awesome-swiper
글로벌 등록
이것은 Nuxt 프로젝트의plugins 디렉터리에 파일을 만들어서 완성한 다음, vue awesome swiper를 가져오고, 마지막으로 vue에게 사용하라고 알려 줍니다.
곤혹스러워하지 마라. 나는 본문에서 이 모든 것을 설명할 것이다.
예를 들어 플러그인 폴더에 'vue awesome swiper.js' 라는 파일을 만들었습니다. 파일에 이름을 붙일 수 있지만, 이렇게 많은 플러그인을 사용하는 상황에서 곤혹스러워하지 않을 것입니다. 이 관례가 가장 좋을 수도 있습니다.파일
plugins/vue-awesome-swiper.js을 만든 후 다음 코드를 파일에 붙여넣습니다. //plugins/vue-awesome-swiper.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
vue.use() 명령이 없으면 아무 일도 일어나지 않는다.플러그인 파일을 설정하면 다음 단계는
plugins의 nuxt.config.js 키에 파일 경로를 추가합니다.plugins 속성을 사용하여 Vue를 추가할 수 있습니다.js 플러그인은 메인 프로그램에 쉽게 연결할 수 있습니다.주 프로그램을 초기화하기 전에 plugins 속성에 정의된 모든 경로를 가져옵니다. //nuxt.config.js
export default {
plugins: ['~/plugins/vue-awesome-swiper.js']
}
슬라이더 생성하기
다음은 구성 요소나 페이지에서 슬라이더를 만들 수 있는 아주 간단한 템플릿 코드입니다.
<template>
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
export default {
name: 'carrousel',
data() {
return {
swiperOptions: {
pagination: {
el: '.swiper-pagination'
},
// Some Swiper option/callback...
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
}
},
mounted() {
console.log('Current Swiper instance object', this.swiper)
this.swiper.slideTo(1, 1000, false)
}
}
</script>
swiper 표시가 있는데 6개swiper-slide 표시로 구성되어 있습니다.슬라이드 내용은 swiper-slide 탭에 표시됩니다.예를 들어, 다음 코드를 살펴보십시오. <swiper-slide>
<div class="mt-14 mx-10 flex flex-col items-center space-y-6">
<img
src="~/assets/images/1.jpg"
class="rounded-xl h-80 w-80 object-cover object-center"
alt=""
/>
<h2 class="font-bold text-4xl">$5</h2>
<p class="text-center text-gray-300">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Dolor tempore at labore sed molestias soluta asperiores
aliquam ipsa consequuntur.
</p>
<a
href=""
class="bg-gray-900 px-10 py-4 rounded-xl text-xl uppercase"
>Buy Now</a
>
</div>
</swiper-slide>
로컬 등록
내가 전에 말한 바와 같이, 너는 전 세계나 로컬에서 너의 플러그인을 등록할 수 있다.로컬에 플러그인을 설치하려면 구성 요소나 페이지를 만들고 스크립트 표시줄에 플러그인을 가져오십시오. vue에서 구성 요소나 어떤 것을 가져오는 것과 같습니다.js.
<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
name: 'carrousel',
data() {
return {
swiperOptions: {
pagination: {
el: '.swiper-pagination'
},
// Some Swiper option/callback...
}
}
},
components: {
Swiper,
SwiperSlide
},
directives: {
swiper: directive
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
}
},
mounted() {
console.log('Current Swiper instance object', this.swiper)
this.swiper.slideTo(1, 1000, false)
}
}
</script>
전 세계에서 로컬 등록을 쉽게 사용할 수 있을 때, 로컬 등록의 중요성이나 본질을 묻기 시작할 수도 있다.사실상, 이것은 완전히 당신에게 달려 있다. 두 가지 방법 모두 일을 잘 할 수 있지만, 만약 당신이 스wiper 플러그인을 한 번도 사용하지 않는다면, 전 세계에서 그것을 등록하면 더욱 깨끗한 코드를 얻을 수 있고, 한 팀에서 일할 수 있을 것이다.
귀하가 완전히 이해할 수 있도록 아래 로컬 등록된 스크립트 탭에 추가된 내용을 추출하기로 결정했습니다.
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
export default {
components: {
Swiper,
SwiperSlide
},
directives: {
swiper: directive
}
}
참고: 글로벌 등록의 예는 로컬 등록에도 적용됩니다.
결론
우리는 nuxt에서 vu 플러그인을 사용하는 기본 지식을 이해했다.js.내가 설명하지 못한 일들이 좀 더 있지만, 나는 이것이 너에게 도움이 될 것이라고 믿는다.🤗
자세한 내용은 Nuxt Documentation를 참조하십시오.
예전과 같이 어떤 문제나 건의가 있으면 언제든지 회답이나 건의를 남겨 주십시오🤭! 부디 socials를 통해 저에게 연락 주세요!😎
감사합니다!
Reference
이 문제에 관하여(Vue 활용 방법Nuxt의 js 플러그인 - [Vue Aweasome swiper]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/olawanle_joel/how-to-make-use-of-vue-js-plugins-in-nuxt-2bao텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
