Vuetify2 样式无法与 Django 正常工作

Question

我正在尝试将 vue + vuex + vuetify 框架添加到我的 django 项目中 我已经安装了node.js和yarn，然后在项目根目录中指定了命令 -

yarn global add @vue/cli

和

vue create client

，并修改了配置文件：

package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "dev": "vue-cli-service build --dest=../../static/builds/dev --mode=development --watch"
  },
  "dependencies": {
    "axios": "^0.21.4",
    "copy-to-clipboard": "^3.3.1",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-modal-dialogs": "^3.0.0",
    "vue-router": "^3.2.0",
    "vuedraggable": "^2.24.3",
    "vuetify": "2.6.5",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "sass": "~1.32.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-vuetify": "~2.4.2",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0"
  }
}

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'
import ru from 'vuetify/es5/locale/ru'
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);

export default new Vuetify({
  lang: {
    locales: {ru},
    current: 'ru'
  }
});

然后我运行

yarn dev

命令并将组装好的文件从静态插入到现有的 html 中

    <script defer="defer" src="{% static 'builds/dev/js/app.js'%}"></script>
    <div class="tab-pane fade" id="structure-tab-content" role="tabpanel" aria-labelledby="structure-tab">
        <div id="app"></div>
    </div>

但是 vuetify 没有正确构建，标签可以工作，但样式不能，无论我做什么 示例 应该如何 正如你所看到的，没有图标，也没有样式

尝试了此线程中的所有内容vuetify 图标未显示但没有任何效果

Answer 1

您安装了哪个软件包？如果你已经安装了

material-design-icons-iconfont

您应该在 main.js 中添加以下样式：

import 'material-design-icons-iconfont/dist/material-design-icons.css';

如果您从评论中导入

@mdi/font/css/materialdesignicons.css

：

您应该安装软件包：

@mdi/font

这两行都导入 Material Design 图标的 CSS 文件，但来自不同的包。