我在 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 按钮着色来运行我的应用程序?
最佳答案
如果你使用的是 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 :
关于javascript - 如何从一开始就在应用程序中添加 vuetify?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51797528/