一、介绍
Vuetify是什么
Vuetify是Vue.js的头号组件库
其通过一致的更新周期 对以前版本的长期支持 响应式社区参与 丰富的资源生态系统和对高质量组件的贡献来为用户提供构建丰富且引人入胜的web应用程序所需的一切
二、安装
Choose - 1:若用vue-cli 则输入vue add vuetify
安装
Choose - 2:若用webpack 则输入npm install vuetify
安装
安装完还需输入npm install sass sass-loader fibers deepmerge -D
安装sass的loader
然后配置webpack.config.js:
module.exports = {
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// 若sass-loader版本是^7.0.0 用此套配置
options: {
implementation: require('sass'),
fiber: require('fibers'),
indentedSyntax: true // optional
},
// 若sass-loader版本是^8.0.0 用此套配置
options: {
implementation: require('sass'),
sassOptions: {
fiber: require('fibers'),
indentedSyntax: true // optional
},
},
},
],
},
],
}
再创建一个Vuetify的配置文件src/plugins/vuetify.js:
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {
}
export default new Vuetify(opts)
最后 在main.js实例化Vue实例并将Vuetify对象作为选项传递进来:
import Vue from 'vue'
import vuetify from '@/plugins/vuetify'
new Vue({
vuetify,
}).$mount('#app')
三、使用
Vuetify 需要使用<v-app>
组件包裹着整个应用程序
并用<v-content>
包裹着主体内容
若不这么做 则样式会发生错乱
▲颜色
在Vuetify组件里 是没有<style>
标签的 因而无法像以往一样在<style>
标签中自定义样式
Vuetify提供了内置颜色属性 开箱即用
默认使用的是Sass色彩包 当然 也提供可选的Javascript色彩包
导入:
<style lang="sass">
$color-pack: false;
@import '~vuetify/src/styles/main.sass';
</style>
</