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

Question

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

我收到以下警告：

未知自定义元素：<v-app>-你注册了组件吗正确地对于递归组件，请确保提供"；name"；选项

未知的自定义元素：<v-alert>-你注册了组件吗正确地对于递归组件，请确保提供"；name"；选项

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插件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({});

Answer 1

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

$ npm install vuetify

安装后，找到您的webpack.config.js文件，并将下面的代码段复制到规则数组中。如果您配置了现有的sass规则，则可能需要应用以下部分或全部更改。如果你想利用vuetify加载程序进行树摇，请确保你使用的是>=4版本的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创建一个插件文件，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/