Question

Я пытаюсь импортировать только Navbar, Modal и Dropdown из Buefy и сталкиваюсь с ошибками, пытаясь сделать то же самое
Я также хочу только соответствующие файлы s css
Я пробовал несколько методов, и пока ничего не работает

Метод 1

npx create-nuxt-app custombuefy
Не выбирайте здесь никакой интерфейс внешнего интерфейса

Шаг 1 Установите Bulma

npm i sass-loader загрузчика узла-sass -D
npm i bulma
Создание приложения.s css внутри папки стилей внутри каталога ресурсов
@ import "~ bulma" внутри приложения.s css
Включить '~ / assets / styles / app, s css' внутри css секции nuxt.config. js
npm запустить сборку && npm запустить запуск, проверить если страница с Bulma запускается на локальном хосте: 3000
На этом этапе выполняется успешно

Шаг 2 Установите Normal Buefy без nuxt-buefy

npm я buefy
Создать файл buefy. js в каталоге плагинов
Добавить '~ / plugins / buefy. js' в раздел плагинов nuxt.config. 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)

Добавьте раскрывающийся список к коду в индексе .

страниц / индекс. 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. js

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

Позволяет изменить файл plugins / buefy. js, чтобы вместо него использовать модули dist / esm

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 file

{
  "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, не сталкиваясь со всеми этими ошибками?

PirateApp · Answer 1 · 18 апреля 2020

import Vue from 'vue'
import { Dropdown, Icon } from 'buefy'

Vue.use(Dropdown)
Vue.use(Icon)

Исправлена ошибка, но компонент * s css все еще не работает

С app.s css as

@import "~bulma";
@import "~buefy/src/scss/buefy";

Стили Buefy не применяются к выпадающий

Как мне импортировать только Navbar, Dropdown и Modal из buefy в Nuxt?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Как мне импортировать только Navbar, Dropdown и Modal из buefy в Nuxt?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы