Vue 和 Vuetify 分离 js html 和 css

Posted 2023-03-07

【中文标题】Vue 和 Vuetify 分离 js html 和 css

【英文标题】：Vue and Vuetify separating js html and css

【发布时间】：2021-03-29 07:22:45

【问题描述】：

我不喜欢将我的 html、css 和 js 组合到一个 vue 文件中，所以我以这种方式构建我的 Vue 组件：

├── Calendar
│   ├── Calendar.css
│   ├── Calendar.html
│   ├── Calendar.js
│   └── index.vue

在 index.vue 中，我引用了这些单独的文件：

<template src="Calendar.html"></template>
<script src="Calendar.js"></script>
<style lang="css" src="Calendar.css"></style>

这一直对我有用，并且是我组织代码的首选方式。但是，我刚刚遇到了 Vuetify 的问题。在全局注册插件后，我发现很多组件，包括<v-card> 都会给出未知组件错误，除非我将所有文件放入单个Vue组件中。我做事的方式是一种不好的做法，还是它根本不适用于 vuetify 的做事方式？

【问题讨论】：

您能否举一个示例组件，在该结构中出现此错误？

【参考方案1】：

感谢@marsnebulasoup 和他的评论，我意识到我无法使用配置了 vuex 的任何预构建代码沙箱来重现该问题，因此它必须与我的特定配置有关。我能够通过卸载并重新安装 vuetify 来解决这个问题。在我这样做之后，一切正常，但它创建了一个新的 vuetify 插件文件。一旦我把它指向我之前使用的配置，它又坏了。我意识到我正在使用的配置正在使用这个导入

import Vuetify from "vuetify/lib/framework"

但是 vuetify 的默认配置是使用

import Vuetify from "vuetify"

一旦我更改了自定义导入以匹配默认导入，一切都会再次运行。我正在使用一个内置 vuetify 的模板，所以我没有立即注意到配置差异，以前从未自己安装过 vuetify。我仍然不知道为什么会有所不同，但确实如此。