使用 webpack 将 Vuetify 集成到 Vue CLI 应用程序中

Posted 2023-02-23

【中文标题】使用 webpack 将 Vuetify 集成到 Vue CLI 应用程序中

【英文标题】：Integrating Vuetify into a Vue CLI app using webpack

【发布时间】：2020-08-23 14:13:31

【问题描述】：

我有一个使用 Webpack 的 Vue CLI 应用程序，我正在将 Vuetify 集成到该应用程序中。由于某种原因，我无法正确加载 Vuetify 组件。

我收到以下警告：

未知的自定义元素： - 你是否注册了组件 正确吗？对于递归组件，请确保提供“名称” 选项。

未知的自定义元素： - 你是否注册了组件 正确吗？对于递归组件，请确保提供“名称” 选项。

JS 文件 (newtab.js)：

import Vue from 'vue';
import Vuetify from '../plugins/vuetify' 
import App from './App';

Vue.use(Vuetify);

new Vue(
  Vuetify,
  components:  App , 
  render: h => h(App)
).$mount('#app')

Vuetify 插件文件：

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

Vue.use(Vuetify);
export default new Vuetify();

Vue 文件（App.vue）：

<template>
    <v-app id="inspire">
      <v-alert type="success">
          I'm a success alert.  message 
      </v-alert>
    </v-app>
</template>

<script>
//import  VApp, VAlert  from 'vuetify/lib' 

export default 
  data () 
    return 
      message: "Additional message"
    
  

</script>

<style scoped>
    p  font-size: 20px; 
</style>

我尝试使用 vue-loader 动态导入组件，确保 vue-cli-plugin-vuetify 和 vue-loader 软件包是最新的。

├── vue-cli-plugin-vuetify@2.0.5 
└── vue-loader@15.9.1

我还尝试手动将组件导入到主 JS 文件和 Vue 文件本身中：

import Vue from 'vue';
import Vuetify, 
    VApp, VAlert
 from 'vuetify/lib';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify, 
    components: 
        VApp, VAlert
    
);
export default new Vuetify();

【问题讨论】：

您使用的是哪个版本的 vuetify？

Vuetify v2.2.27

尝试删除 Vue.use(Vuetify);从 newtab.js 也将 Vuetify 重命名为 vuetify，同时在 newtab.js 中导入（只是约定）

【参考方案1】：

要将 Vuetify 安装到 Webpack 项目中，您需要添加一些依赖项：

$ npm install vuetify

安装后，找到您的 webpack.config.js 文件并将下面的 sn-p 复制到规则数组中。如果您配置了现有的 sass 规则，则可能需要应用以下部分或全部更改。如果您希望使用 vuetify-loader 进行 treeshaking，请确保您的 Webpack 版本 >=4。

// 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 创建一个插件文件，src/plugins/vuetify.js，内容如下：

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

现在你应该可以使用 Vuetify 组件了。 来自https://vuetifyjs.com/en/getting-started/quick-start/