반응형
Nuxt의 buefy에서 Navbar, Dropdown 및 Modal만 Import하려면 어떻게 해야 하나요?
- Buefy에서 Navbar, Modal 및 Dropdown만 가져오려고 하는데 같은 작업을 수행하려고 하면 오류가 발생함
- 또한 관련 sss 파일만 원합니다.
- 지금까지 여러 가지 방법을 시도했지만 효과가 없습니다.
방법 1
- npx create-nuxt-app custombuefy
- 여기서 프런트 엔드 프레임워크를 선택하지 마십시오.
순서 1 Bulma 설치
- npm i 노드 sass sass-loader -D
- npm i bulma
- 자산 디렉토리 내에 app.scss inside styles 폴더를 만듭니다.
- @app.scss 내에 "~bulma"를 Import합니다.
- nuxt.config.js의 css 섹션에 '~/assets/styles/app,scss'를 포함합니다.
- npm run build & npm run start, Bulma가 있는 페이지가 localhost:3000에서 실행되는지 확인합니다.
- 이 단계에서 성공적으로 실행됨
순서 2 nuxt-buefy를 사용하지 않고 일반 Buefy를 설치합니다.
- npm i buefy
- 플러그인 디렉토리에 buefy.js 파일을 만듭니다.
- nuxt.config.js의 플러그인 섹션에 '~/plugins/buefy.js'를 추가합니다.
- BDropdown, BModal, BNAvbar를 buefy에서 가져오려면 다음 코드를 추가합니다.
처음에 여기에 CSS를 직접 포함했습니다.
import Vue from 'vue'
import { BDropdown, BDropdownItem, BModal, BNavbar } from 'buefy'
import 'buefy/dist/buefy.min.css'
Vue.use(BDropdownItem)
Vue.use(BDropdown)
Vue.use(BModal)
Vue.use(BNavbar)
- 인덱스의 코드에 드롭다운을 추가합니다.
pages/index.vue 파일
<template>
<div class="container">
<div>
<logo />
<b-dropdown aria-role="list">
<button
slot="trigger"
slot-scope="{ active }"
class="button is-primary"
>
<span>Click me!</span>
<b-icon :icon="active ? 'menu-up' : 'menu-down'"></b-icon>
</button>
<b-dropdown-item aria-role="listitem">Action</b-dropdown-item>
<b-dropdown-item aria-role="listitem">Another action</b-dropdown-item>
<b-dropdown-item aria-role="listitem">Something else</b-dropdown-item>
</b-dropdown>
</div>
</div>
</template>
<script>
import Logo from '~/components/Logo.vue'
export default {
components: {
Logo,
},
}
</script>
<style>
.container {
margin: 0 auto;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.title {
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
display: block;
font-weight: 300;
font-size: 100px;
color: #35495e;
letter-spacing: 1px;
}
.subtitle {
font-weight: 300;
font-size: 42px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}
.links {
padding-top: 15px;
}
</style>
nuxt.config.config.syslog
module.exports = {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || '',
},
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: ['~/assets/styles/app.scss'],
/*
** Plugins to load before mounting the App
*/
plugins: ['~/plugins/buefy'],
/*
** Nuxt.js dev-modules
*/
buildModules: [
// Doc: https://github.com/nuxt-community/eslint-module
'@nuxtjs/eslint-module',
// Doc: https://github.com/nuxt-community/stylelint-module
'@nuxtjs/stylelint-module',
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
'@nuxtjs/pwa',
// Doc: https://github.com/nuxt-community/dotenv-module
'@nuxtjs/dotenv',
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {},
},
}
결과
ERROR Cannot read property 'install' of undefined 16:19:41
at Function.t.use (node_modules/vue/dist/vue.runtime.common.prod.js:6:36869)
at Module.<anonymous> (server.js:1:559776)
at r (server.js:1:194)
at Object.<anonymous> (server.js:1:5233)
at r (server.js:1:194)
at server.js:1:1259
at Object.<anonymous> (server.js:1:1269)
at o (node_modules/vue-server-renderer/build.prod.js:1:77607)
at node_modules/vue-server-renderer/build.prod.js:1:78200
at new Promise (<anonymous>)
방법 2
대신 dist/esm 모듈을 사용하도록 plugins/buefy.js 파일을 수정합니다.
import Vue from 'vue'
import { BDropdown, BDropdownItem } from 'buefy/dist/esm/dropdown'
import 'buefy/dist/buefy.min.css'
Vue.use(BDropdownItem)
Vue.use(BDropdown)
결과
ERROR Cannot use import statement outside a module 16:23:03
(function (exports, require, module, __filename, __dirname) { import './chunk-6ea13200.js';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at new Script (vm.js:88:7)
at createScript (vm.js:263:10)
at Object.runInThisContext (vm.js:311:10)
at wrapSafe (internal/modules/cjs/loader.js:1059:15)
at Module._compile (internal/modules/cjs/loader.js:1122:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (internal/modules/cjs/helpers.js:77:18)
방법 3
대신 구성 요소 디렉터리의 구성 요소를 사용합니다.다시 다음과 같이 plugins/buefy.js 파일을 수정합니다.
import Vue from 'vue'
import { BDropdown, BDropdownItem } from 'buefy/dist/components/dropdown'
import 'buefy/dist/buefy.min.css'
Vue.use(BDropdownItem)
Vue.use(BDropdown)
결과
브라우저 콘솔에 알 수 없는 커스텀 요소가 표시되며 드롭다운이 완전히 깨졌습니다.
종속성 문제일 경우, 여기 제 패키지가 있습니다.json 파일
{
"name": "custombuefy",
"version": "1.0.0",
"description": "My marvelous Nuxt.js project",
"author": "",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production node server/index.js",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"test": "jest"
},
"lint-staged": {
"*.{js,vue}": "npm run lint",
"*.{css,vue}": "stylelint"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"dependencies": {
"@nuxtjs/axios": "^5.9.7",
"@nuxtjs/dotenv": "^1.4.1",
"@nuxtjs/pwa": "^3.0.0-beta.20",
"buefy": "^0.8.15",
"bulma": "^0.8.2",
"cross-env": "^7.0.2",
"express": "^4.17.1",
"nuxt": "^2.12.2"
},
"devDependencies": {
"@nuxtjs/eslint-config": "^2.0.2",
"@nuxtjs/eslint-module": "^1.1.0",
"@nuxtjs/stylelint-module": "^3.2.2",
"@vue/test-utils": "^1.0.0-beta.33",
"babel-eslint": "^10.1.0",
"babel-jest": "^25.3.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.1",
"eslint-plugin-nuxt": ">=0.5.2",
"eslint-plugin-prettier": "^3.1.3",
"husky": "^4.2.5",
"jest": "^25.3.0",
"lint-staged": "^10.1.5",
"node-sass": "^4.13.1",
"nodemon": "^2.0.3",
"prettier": "^2.0.4",
"sass-loader": "^8.0.2",
"stylelint": "^13.3.2",
"vue-jest": "^4.0.0-0"
}
}
이 모든 오류 없이 Buefy에서 Dropdown, Navbar, Modal만 Import할 수 있는 방법을 알려주세요.
import Vue from 'vue'
import { Dropdown, Icon } from 'buefy'
Vue.use(Dropdown)
Vue.use(Icon)
문제를 해결했지만 컴포넌트에 적합한 scss가 아직 작동하지 않습니다.
app.scs를 로서
@import "~bulma";
@import "~buefy/src/scss/buefy";
Buefy 스타일이 드롭다운에 적용되지 않습니다.
업데이트 SCSS도 부분적으로 Import할 수 있습니다.
@import "~buefy/src/scss/utils/_all";
@import "~buefy/src/scss/components/_autocomplete";
@import "~buefy/src/scss/components/_dropdown";
@import "~buefy/src/scss/components/_notices";
언급URL : https://stackoverflow.com/questions/61287986/how-do-i-only-import-navbar-dropdown-and-modal-from-buefy-in-nuxt
반응형
'programing' 카테고리의 다른 글
| Vue는 본체의 스크롤 높이를 계산하거나 감시할 수 있습니까? (0) | 2022.08.15 |
|---|---|
| errno 확인 중!= EINTR: 무슨 뜻입니까? (0) | 2022.08.15 |
| 선택한 Vue Js 드롭다운에서 값 가져오기 (0) | 2022.08.15 |
| Vuejs 2: 컴포넌트에서 부모로 이벤트 전송 (0) | 2022.08.15 |
| 어떻게 하면 C에서 OO 스타일의 다형을 시뮬레이션 할 수 있나요? (0) | 2022.08.15 |