Laravel VuetifySetup - PullRequest
Новая
       5

Laravel VuetifySetup

0 голосов
/ 24 апреля 2020

Я следовал инструкциям на YouTube для настройки Vuetify с помощью laravel. Мне удалось успешно настроить проект, т.е. установить все зависимости, как указано в руководстве. Хотя на последнем этапе, NPM watch, я получаю следующую ошибку в консоли:

Uncaught TypeError: _plugins_vuetify__WEBPACK_IMPORTED_MODULE_1 __. Default не является конструктором

vuetify. js код: 

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

1 Ответ

1 голос
/ 24 апреля 2020

Проблема как раз и заключается в том, что вы экспортируете Vuetify по умолчанию.

Для этого рекомендуется импортировать Vuetify в отдельный файл в плагинах, например, так что я буду придерживаться этой практики.

Итак, после запуска: 

$ npm install vuetify --save
// OR
$ yarn add vuetify

для установки Vuetify на существующие приложения через Webpack или создания нового проекта Vue. js, например: 

$ vue add vuetify

Вы должны следовать приведенным ниже инструкциям.

Vuetify v1.5.*

Если вы используете Vuetify v1.5.*, следуйте приведенным ниже инструкциям (в противном случае пропустите это до следующего)

Прежде всего вам не нужно экспортировать Vuetify в этой версии, вам просто нужно импортировать Vuetify и указать Vue, чтобы использовать его. Таким образом, plugins/vuetify.js должно быть таким (Вы также можете напрямую сделать следующее в main.js или app.js): 

// /plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

ПРИМЕЧАНИЕ: Вы также можете определить некоторые в файле Vue .use, указанном выше, и передайте его как объект, например: 

Vue.use(Vuetify, {/*Your setting goes here*/})

, а затем импортируйте его, как показано ниже, в main.js или app.js: 

// main.js or app.js

import Vue from 'vue'
import 'vuetify/dist/vuetify.min.css' // You also need to import Vuetify CSS file and also ensure you are using css-loader

import './plugins/vuetify' // We have assuemed the above snippet is in the plugins directory and it lies next to main.js or app.js
...
new Vue({
  el: "#app",
  router,
  store,
  render: h => h(App),
})

Vuetify v2.*.*

После добавления его через ваш веб-пакет вам нужно найти webpack.config.js и добавить в него следующие параметры для настройки загрузчика: 

// webpack.config.js

module.exports = {
  rules: [
    {
      test: /\.s(c|a)ss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          // Requires sass-loader@^7.0.0
          options: {
            implementation: require('sass'),
            fiber: require('fibers'),
            indentedSyntax: true // optional
          },
          // Requires sass-loader@^8.0.0
          options: {
            implementation: require('sass'),
            sassOptions: {
              fiber: require('fibers'),
              indentedSyntax: true // optional
            },
          },
        },
      ],
    },
  ],
}

После этого просто создайте каталог плагина, а затем vuetify.js файл наподобие и добавьте в него следующее: 

// /plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

Затем перейдите к своей основной записи (main.js или app.js) и импортируйте ее как ниже: 

// main.js or app.js

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // We have assumed the above snippet is in the plugins directory and it lies next to main.js or app.js

new Vue({
  vuetify,
}).$mount('#app')

ПРИМЕЧАНИЕ: Это гораздо больше похоже на инструкцию, но для получения дополнительной информации вы можете посетить документацию здесь .

...