0

我正在将 Nuxt.js 与 Vuetify 一起使用,我想仅为菜单使用外部 Javascript 库,但似乎 2 不想共存,因为我没有看到来自外部 Javascript 库的任何事件被分配给一个 HTML 元素。

想让 Vuetify 与外部书店共存的想法是否可行?

我是否忘记了 Webpack 配置中的某些内容?你能帮助我吗?

这是我的nuxt.config.js

import colors from 'vuetify/es5/util/colors'

const webpack = require("webpack")

export default {
  /*
  ** Nuxt rendering mode
  ** See https://nuxtjs.org/api/configuration-mode
  */
  mode: 'universal',
  /*
  ** Nuxt target
  ** See https://nuxtjs.org/api/configuration-target
  */
  target: 'server',
  /*
  ** Headers of the page
  ** See https://nuxtjs.org/api/configuration-head
  */
  head: {
    titleTemplate: '%s - ' + process.env.npm_package_name,
    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 || '' }
    ],
    script: [
      { src: 'https://botifulthemes.net/js/jquery/jquery.js' },
      { src: 'https://botifulthemes.net/js/vendor.min.js', body: true },
      { src: 'https://botifulthemes.net/js/underscore.min.js', body: true },
      { src: 'https://botifulthemes.net/js/app.min.js', body: true }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Global CSS
  */
  css: [

  ],
  /*
  ** Plugins to load before mounting the App
  ** https://nuxtjs.org/guide/plugins
  */
  plugins: [
    // { src: '~plugins/vendor-app.js' },
    // { src: '~plugins/underscore-app.js' },
    // { src: '~plugins/main-app.js' },
  ],
  /*
  ** Auto import components
  ** See https://nuxtjs.org/api/configuration-components
  */
  components: true,
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    '@nuxtjs/vuetify'
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios'
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {},
  /*
  ** vuetify module configuration
  ** https://github.com/nuxt-community/vuetify-module
  */
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      options: {
        customProperties: true
      },
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        },
        light: {
          background: '#001429',
          primary: '#f4511e',
          secondary: '#001429'
        }
      }
    }
  },
  /*
  ** Build configuration
  ** See https://nuxtjs.org/api/configuration-build/
  */
  build: {
    // vendor: [ 'jquery' ],
    // plugins: [
    //     new webpack.ProvidePlugin({
    //         $: 'jquery',
    //         jQuery: 'jquery',
    //         'window.jQuery': 'jquery'
    //     })
    // ],
    /*
    ** Vous pouvez étendre la configuration webpack ici
   */
   extend(config, ctx) {
      // Exécuter ESLint lors de la sauvegarde
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: "pre",
          test: /\.(js|vue)$/,
          loader: "eslint-loader",
          exclude: /(node_modules)/,
          options: {
            fix: true
          }
        })
        // config.module.rules.push({
        //     test: /\.(js|jsx)$/i,
        //     loader: 'file-loader',
        //     options: {
        //       name: '[path][name].[ext]'
        //     }
        // })
      }
    }
  }
}

下面这部分是不活动的:

script: [
      { src: 'https://botifulthemes.net/js/jquery/jquery.js' },
      { src: 'https://botifulthemes.net/js/vendor.min.js', body: true },
      { src: 'https://botifulthemes.net/js/underscore.min.js', body: true },
      { src: 'https://botifulthemes.net/js/app.min.js', body: true }
    ],
4

1 回答 1

0

正如本文档中所说的“Vue 是一个嫉妒的库,因为你必须让它完全拥有你给它的 DOM 补丁(由你传递给 el 的内容定义)”

所以如果你想使用像 jquery 这样的其他库阅读下面的链接会很有用 https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

于 2020-08-08T14:50:39.187 回答