如何从一开始就在应用程序中添加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>

Main.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，则可以运行此命令； newLatLngZoom

如果要手动添加，请查看文档here：

这里有一个示例，请记住在webpack中添加css-loader。

vue add vuetify

编辑： 您不应该这样改变问题，下次考虑一下只会使其他寻求帮助或试图帮助您的人感到困惑：）

关于您的新问题，您的模板错误。您缺少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>

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

Answer 2

使用Vue CLI 3，您可以simply添加它，就像添加任何其他包：vue add vuetify。

现在，如果您运行git diff，将会在幕后看到一切已为您完成：

您可以在安装过程结束时看到修改过的文件：

在the past中，我们习惯于手动执行此操作，但这并不总是很明显。这是Vue CLI 3的一项重大改进。