关于导入、配置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中key的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-11-11
vue打包通过image-webpack-loader插件对图片压缩优化操作
这篇文章主要介绍了vue打包通过image-webpack-loader插件对图片压缩优化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
vue是一款渐进式JavaScript框架,渐进式是指由浅到深,由简单到复杂的使用vue框架,下面这篇文章主要给大家分享介绍了几个可以助你提高效率的Vue指令,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了element-ui中使用upload组件获取上传文件信息方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
Vue是构建Web界面的JavaScript库，原称为Vue.js，它可以通过简洁的API来提供高效的数据绑定和灵活的组件系统，本文详细介绍了Vue的使用安装和相关知识，有兴趣的同学可以参考借鉴2023-03-03
这篇文章主要介绍了vue监听sessionStorage中值的变化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
vue中iframe使用以及结合postMessage实现跨域通信
这篇文章主要介绍了vue中iframe使用以及结合postMessage实现跨域通信方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了如何解决ElementPlus的el-table底白线问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
今天小编就为大家分享一篇vue表单自定义校验规则介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
工作中碰到需要多图上传,在使用element-ui解决过程中碰到一些问题,在这里分享给大家,这篇文章主要给大家介绍了关于element-ui图像组件、上传组件以及分页组件实现的相关资料,需要的朋友可以参考下2024-02-02
最新评论