NuxtJS 2에 jQuery DataTables를 추가하는 방법
오늘은 NuxtJS 2에 jQuery DataTables를 추가하는 방법에 대해 공유하겠습니다. 여기에서는 버전 5.1.x와 함께 bootstrap의 CSS 프레임워크를 사용합니다.
여러분이 NuxtJS을(를) 설치했다고 가정합니다. 이제 바로 본론으로 들어갑니다.
jQuery 및 DataTable 설치
부트스트랩 이외의 것을 사용하는 경우 불마 등 다른 것을 사용할 수 있습니다. For example
npm install jquery datatables.net-bs5
또는
yarn add jquery datatables.net-bs5
jQuery 및 DataTables용 설치 유형
npm install @types/jquery @types/datatables.net --dev
또는
yarn add @types/jquery @types/datatables.net --dev
tsconfig.json에 유형 추가
"types": [
...
"@types/jquery",
"@types/datatables.net"
...
]
assets/js/scripts.js에 scripts.js라는 이름으로 JavaScript를 생성한 후 아래 코드를 추가합니다.
import 'bootstrap'
import 'datatables.net-bs5'
nuxt.config.js 파일 열기
첫 줄에 아래 코드 추가
import { ProvidePlugin } from 'webpack'
아래로 스크롤하면 플러그인을 찾을 수 있습니다. 그런 다음 아래 코드를 추가하십시오
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
...
{
src: '~/assets/js/scripts.js',
mode: 'client'
}
...
],
아래로 스크롤하면 빌드 구성을 찾을 수 있습니다. 그런 다음 아래 코드를 추가하십시오
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
...
plugins: [
new ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
...
}
페이지 폴더에 새 파일을 만들어 봅시다. 이름을 datatables.vue로 지정하겠습니다.
그런 다음 아래 코드를 추가하고 html 스크립트 태그에 저장하십시오.
export default Vue.extend({
name: 'DataTablesPage',
mounted () {
$('#datatables').DataTable()
}
...
})
이제 이것을 실행하십시오.
npm run dev
또는
yarn dev
이제 결과를 볼 수 있습니다.
이와 같이
또는 언어를 추가할 수도 있습니다. 예를 들어 인도네시아어를 사용합니다. 언어 목록은 here을 참조하십시오.
$('#datatables').DataTable({
language: {
url: 'https://cdn.datatables.net/plug-ins/1.12.1/i18n/id.json'
}
})
소스 코드: https://github.com/febryars33/nuxtjs-datatables-example
Reference
이 문제에 관하여(NuxtJS 2에 jQuery DataTables를 추가하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/febryars33/how-to-add-jquery-datatables-to-nuxtjs-2-5c1h텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
