如果没有webpack.config.js文件,如何正确安装Vuetify



Vuetify文档说:

区块报价安装后,找到webpack.config.js文件,并将下面的代码段复制到规则数组中。如果您配置了现有的sass规则,则可能需要应用以下部分或全部更改。如果你想利用vuetify加载程序进行树摇,请确保你使用的是>=4版本的Webpack。你可以在A-la-cart页面上找到更多关于使用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
},
},
},
],
},
],
}

然而,在我的项目中没有webpack.config.js。我确实使用webpack创建了我的项目。
有人能告诉我应该把指定的代码添加到哪里吗?谢谢

编辑时间:我需要添加上述代码的原因是我遇到了一个错误:

webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 [Vue warn]: Error in render: "TypeError: Cannot read property 'smAndDown' of undefined" found in ---> <VToolbar> <VCard> <StudentInfo> at src/components/StudentInfo.vue <App> at src/App.vue <Root>

我在谷歌上搜索了一下,据说是因为Vuetify安装不正确。
请看一下这个链接,我的问题文件:https://github.com/powerseed/Test/blob/master/client/src/components/StudentInfo.vuev-toolbar是导致错误的部分。如果删除它,错误就会消失。
我想如果我把上面提到的代码添加到webpack.congif.js中,它可能会解决错误,因为这是Vuetify文档中唯一我没有做的部分。否则我不知道如何解决它…

我在回顾性地尝试将vue-add-vuetify添加到我的项目中时也遇到了困难。从现在起,当我开始一个新项目时,我会从头开始安装它。如果你的项目已经在开发中,你可以尝试通过vue GUI来完成,我过去对现有项目也这样做过,并且没有中断的问题。

我使用vuetify的解决方案一直是在src/main.js中执行以下操作

import Vuetify from 'vuetify/lib'
Vue.use(Vuetify) //Add any theme modifications here

结账https://vuetifyjs.com/en/getting-started/quick-start/就在你找到webpack.config.js的地方

您可以使用plugin.js来设置它,就像文档中的方法或我上面的方法一样。在我的示例中,不需要webpack.config!

最新更新