zoukankan      html  css  js  c++  java
  • 《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

  • 相关阅读:
    判断当天是周几
    九九乘法表
    js创建table表格
    tab切换-自动、点击、内容变换
    必须关注的25位知名JavaScript开发者
    静态路由
    dubbo
    SOA、SOAP、RPC
    【转】spring之任务调度
    Redis-cli命令最新总结【转】
  • 原文地址:https://www.cnblogs.com/kitty-chan/p/12869474.html
Copyright © 2011-2022 走看看