时间戳

首页 > 解决方案 > 如何从开始在应用程序中添加 vuetify？

javascript - 如何从开始在应用程序中添加 vuetify？

问题描述

我在 vue 中制作了全新的应用程序，我想在应用程序中添加 vuetify 作为框架。通过运行npm install vuetify --save此命令，它将添加到应用程序中，但是当我想使用它时，运行应用程序时没有显示 css 按钮颜色。

App.vue 和 main.js 文件是：-

应用程序.vue：-

<template>
  <div id="app">
    <v-btn color="success">Success</v-btn>
    <v-btn color="error">Error</v-btn>
    <v-btn color="warning">Warning</v-btn>
    <v-btn color="info">Info</v-btn>
 </div>
</template>

<script>

  export default {

  }
</script>

主.js

import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify);

new Vue({
  el: '#app',
  render: h => h(App)
})

如何使用 CSS 按钮着色运行我的应用程序？

标签： javascriptvue.jscomponentsvuetify.js

解决方案

如果你使用的是 vue-cli 3，你可以运行这个命令；vue add vuetify

如果您想手动添加它，请查看此处的文档：

这里有一个例子，记得在 webpack 中添加 css-loader。

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

new Vue({
 el: '#app',
 render: h => h(App)
})

编辑： 你不应该那样改变问题，下次想想它只会让其他寻求帮助或试图帮助你的人感到困惑:)

关于您的新问题，您的模板是错误的。你不见了<v-app>

<v-app>
 <v-btn color="success">Success</v-btn>
 <v-btn color="error">Error</v-btn>
 <v-btn color="warning">Warning</v-btn>
 <v-btn color="info">Info</v-btn>
<v-app>

在此处查看文档中的红色横幅：

推荐阅读