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

Question

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

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

App.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 按钮着色来运行我的应用程序？

Answer 1

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

如果您想手动添加它，请查看文档 here :

这里有一个例子，记得在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>

查看文档中的红色横幅 here :