关于导入、配置Vuetify遇到的几个问题

更新时间：2023年06月05日 09:57:33 作者：元无心

这篇文章主要介绍了关于导入、配置Vuetify遇到的几个问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

导入、配置Vuetify遇到的几个问题

1.Semicolons aren’t allowed in the indented syntax

从2.0开始，Vuetify支持了SASS/SCSS。

使用的时候需要在vue.config.js里配置loader。

而且我还想同时使用scss文件，按照官网的配置方法，应该这么配置：

module.exports = {  
  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/sass/main.scss"`,
      },
    },
  },
  chainWebpack: config => {
    ["vue-modules", "vue", "normal-modules", "normal"].forEach((match) => {
      config.module.rule('scss').oneOf(match).use('sass-loader')
        .tap(opt => Object.assign(opt, { data: `@import '~@/sass/main.scss';` }))
    })
  }  
}

但是有一点需要注意，在上面的CSS配置里，import语句的结尾是没有分号的，而下面的chainWebpack里是有分号的。

如果在CSS配置里不小心加上分号就会一直报错，无法通过编译，而且还提示是Vuetify本身出了问题……用的时候一定要注意。

2.TS7106: Could not find a declaration file for module ‘vuetify/lib’

与这个问题一起出现的是Vuetify无法在main里引入，而且过不了编译。

这个是TypeScript声明文件的问题，具体原因可以看之前写的关于ts声明文件的东西。

解决方案很简单，在tsconfig.json里加上vuetify即可：

"types": [
    "webpack-env",
    "vuetify"
]

这样才能让ts获得vuetify的类型声明。

vue引入vuetify报错“Error: Vuetify is not properly initialized”

刚刚添加vuetify的时候（2.0.16），会报错

Error: Vuetify is not properly initialized

需要在main.js中配置

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.config.productionTip = false
Vue.use(Vuetify)
// vuetify 自定义配置
export default new Vuetify({})
new Vue({
  router,
  store,
  vuetify: new Vuetify(),
  render: h => h(App)
}).$mount('#app')

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue 如何根据条件判断属性的添加和去除
这篇文章主要介绍了vue 如何根据条件判断属性的添加和去除，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-01-01
Vue实现单行删除与批量删除
这篇文章主要介绍了Vue实现单行删除与批量删除，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue中created、watch和computed的执行顺序详解
由于vue的双向数据绑定,自动更新数据的机制,在数据变化后,对此数据依赖的所有数据,watch事件都会被更新、触发,下面这篇文章主要给大家介绍了关于vue中created、watch和computed的执行顺序,需要的朋友可以参考下
2022-11-11
vue开发树形结构组件(组件递归)
这篇文章主要为大家详细介绍了vue开发树形结构组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
Vue图片裁剪组件实例代码
这篇文章主要给大家介绍了关于Vue图片裁剪组件的相关资料,本文介绍的组件是基于vue-cropper二次封装,vue-cropper大家应该都很熟悉了吧,需要的朋友可以参考下
2021-07-07
Element-Plus Select组件实现滚动分页加载功能
Element-Plus的select组件并没有自带滚动分页加载的功能,其虽然提供了自定义下拉菜单的底部的方式可以自定义上一页及下一页操作按钮的方式进行分页加载切换,这篇文章主要介绍了Element-Plus Select组件实现滚动分页加载功能,需要的朋友可以参考下
2024-03-03
vue实现几秒后跳转新页面代码
这篇文章主要介绍了vue实现几秒后跳转新页面代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
在VUE中使用lodash的debounce和throttle操作
这篇文章主要介绍了在VUE中使用lodash的debounce和throttle操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Element中Slider滑块的具体使用
这篇文章主要介绍了Element中Slider滑块的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
vue设置导航栏、侧边栏为公共页面的例子
今天小编就为大家分享一篇vue设置导航栏、侧边栏为公共页面的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11