前两天百度,发现一个以前没用过的框架:Vuetify~ 这个也是个组件库,好像还蛮好用的,很方便,还能快速建站(vuex+vue-router+vue-router-sync+vuetify),主要讲一下安装和初始化,快速建站看文章后面的链接
一,关于vuetify的安装以及使用
1.npm install --save vuetify
2.在main.js里引入并且使用
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
3.在根元素绑定那里初始化:
在new Vue({
el:'#app',
vuetify:new vuetify(),
})
4.在app.vue里
<template>
<v-app id='app'>
<router-view></router-view>
</v-app>
</template>
就这样我们的安装以及初始化就完成了,在各个.vue文件里直接使用Vuetify就可以了,vue add vuetify这条命令就能让vuetify直接用了,打开后的界面是这样式儿的:
二,快速建站,要先安装Vuetify + Vuex + Vue-router + Vue-router-sync
// src/main.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import App from './App'
import store from './store'
import router from './router'
import { sync } from 'vuex-router-sync'
Vue.use(Vuetify);
sync(store, router);
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
});
后续可看https://www.jianshu.com/p/eb863de83226,这篇文章写得很好,nice!
彩蛋:关于vuetify里的色彩,可以看这一篇来了解:https://conyli.cc/archives/2764
vuetify的视差,可以参考这篇:https://blog.csdn.net/OnismYY/article/details/86539211