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

Posted 2023-02-23

【中文标题】如何从开始在应用程序中添加 vuetify？

【英文标题】：How to add vuetify in the app from starting?

【发布时间】：2019-01-18 17:16:41

【问题描述】：

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

【参考方案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中的红色横幅：

【讨论】：

通过使用此代码 vuetify 运行良好，但如何在此项目中包含 vuetify css 文件。 @valDaHus import 'vuetify/dist/vuetify.min.css' 这用于 css 但在运行代码时它不显示任何错误并且不显示 css 颜色

包含 css 文件的方法有多种。我不知道您的项目设置，也许您可​​以分享更多信息？

我为你编辑了我的代码，你现在可以告诉我为什么它没有显示按钮颜色。

我现在也更新了我的答案，但不要更改问题，它只会让我们所有人感到困惑。下次您可以添加更多信息或创建一个新问题 :)

【参考方案2】：

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

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

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

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