时间戳

首页 > 解决方案 > Laravel VuetifySetup

laravel - Laravel VuetifySetup

问题描述

我按照youtube上的教程使用 laravel 进行 Vuetify 设置。我成功地设置了项目，即安装教程中指定的所有依赖项。尽管在最后一步 NPM watch 中，我在控制台中收到以下错误；

未捕获的类型错误：_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)

标签： laravelvue.jsvuetify.js

解决方案

问题恰恰在于您导出默认 Vuetify 的位置。

最好的做法是在插件的单独文件中导入 Vuetify，例如，我将保持这种做法。

所以运行后：

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

通过 Webpack 在现有应用程序上安装 Vuetify 或创建一个新的 Vue.js 项目，如下所示：

$ vue add vuetify

您应该按照以下说明进行操作。

验证v1.5.*

如果您使用的是 Vuetify ，请v1.5.*按照以下说明进行操作（否则，请跳到下一个）

首先，您不必在此版本中导出 Vuetify，您只需导入 Vuetify 并告诉 Vue 使用它。所以plugins/vuetify.js应该是这样的（您也可以直接在您的main.jsor中执行以下操作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然后像下面这样在你的or中导入它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),
})

验证v2.*.*

通过您的 Webpack 添加它后，您需要找到webpack.config.js以下设置并将其添加到您的 Webpack 中以配置加载程序：

// 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')

注意：这听起来更像是一个说明，但有关更多信息，您可以访问此处的文档。

推荐阅读