《Vue+Vuetify》


  前两天百度,发现一个以前没用过的框架: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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM