Material Design风格神框架vuetify 学习笔记(一)

最新推荐文章于 2024-04-08 01:13:37 发布
最新推荐文章于 2024-04-08 01:13:37 发布
阅读量982 收藏 9
点赞数 1
文章标签： css html vue web svn
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/finedayforu/article/details/119797774
版权

一. 安装vuetify

1. vue插件式安装

首先我们使用vue_cli创建一个新的vue项目, 进入项目, 然后:

vue add vuetify

他会问一个git问题, 直接选y

他会问版本问题, 我们直接选default

vuetify就这么装好了

2. 项目目录文件变化

变化1:

我们发现相比vue-cli默认构建的项目, 多了一个plugins/vuetify.js

变化2:

App.Vue中多了一个APP, 这是vuetify的根组件

变化3:

还重写了一些helloworld组件😂😂😂

最低0.47元/天 解锁文章
finedayforu
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Material Design风格神框架vuetify 学习笔记(二)
finedayforu的博客
08-24 758
一. 断点 breakpoint 同bootstrap类似, 我们设计断点, 会让我们在不同长宽不同分辨率的设备上有更好的体验, 是一种快速可行的自适应方法. 断点常常作为参数出现在其他属性中 <v-row> <v-col class="col-lg-3 col-md-4 col-sm-6 col-12"> <v-btn bloc...
vuetify框架
xiewu1015的博客
11-20 8792
问题合集 1、v-carousel ----Q:使用v-carousel之后，手机屏幕上下左右各有边框。 ----A:可能是在APP.vue使用了v-container布局，注释掉就可以了。 2、v-card ----Q:使用卡片布局，有时候下方会有一道边框线。 ----A:使用flat属性&lt;v-card flat&gt;&lt;/v-card&gt; 3、v-flex ----Q:栅格系统...
Vue Material - 基于谷歌 Material Design 打造的前端组件库，用 Vue 开发海外应用的绝佳选择
那些免费的砖
12-12 3788
一位朋友问我用 vue 开发 APP 在谷歌商店上架，有什么简单的 UI 组件库，我推荐了这款，同样推荐给各位。
Vuetify学习笔记(壹)：Vuetify的安装、颜色及样式、按钮和图标、不同尺寸设备的适配
01-08
一、介绍 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：
大佬带你看源码，Vuetify学习笔记 (一) 安装和布局，前端开发培训就业
最新发布
m0_74535175的博客
04-08 267
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。
vue学习笔记
NOAH_123456的博客
08-21 203
vue学习笔记 inject inject: [‘userInfo’] 信息注入，数来源可能是父节点或者祖先节点。 props export default { name: ‘MyName’, components:{ myPane01, myPane02 }, props:{ myInfo:{ type:Object, default:()=>({}) } } } props属性为父节点数...
2021-04-01
qq_45793102的博客
04-01 82
UI-Vuetify框架 5.Vuetify框架5.1.为什么要学习UI框架5.2.为什么是Vuetify5.3.怎么用？ 5.Vuetify框架 5.1.为什么要学习UI框架 Vue负责的是虽然会帮我们进行视图的渲染，但是样式是有我们自己来完成。这显然不是我们的强项，因此后端开发人员一般都喜欢使用一些现成的UI组件，拿来即用，常见的例如： BootStrapLayUIEasyUIZUI 然而这些UI组件的基因天生与Vue不合，因为他们更多的是利用DOM操作，借助于jQuery实现，而不
Material design风格浮动按钮特效特效代码
03-20
material-floating-button是一款使用纯Js制作的Material design风格浮动按钮特效。该Material design风格浮动按钮特效提供4种动画特效，它们都可以在鼠标滑过按钮时以炫酷的方式展开按钮。
MaterialDesign风格的控件阴影添加工具.rar
07-30
MaterialDesign风格的控件阴影添加工具.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
学习使用Material Design控件（一）
08-29
主要为大家介绍了学习使用Material Design控件的详细教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于Bootstrap实现Material Design风格表单插件 附源码下载
10-22
Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。这篇文章主要介绍了基于Bootstrap的Material Design风格表单插件附源码下载，感兴趣的朋友参考下
基于Vue的MaterialDesignUI库Vue-Carbon.zip
07-19
vue-carbon，基于 vue 开发 material design 风格的移动端 WEB UI 库, 设计资源参考 CARBON FrameWork7。安装目前只使用 npm 安装，和使用 webpack 项目的应用npm install vue-carbon --saveimport Vue from 'vue' import VueCarbon from 'vue-carbon' Vue.use(VueCarbon)简单使用例如这个 Refresh Control 组件的demo页面<template> <div class="page">   <header-bar>     <icon-button slot="left" @click="back()" icon="arrow_back"></icon-button>     <span>Refresh Control</span>     <icon-button slot="right" @click="refresh()" icon="refresh"></icon-button>   </header-bar>   <content v-el:trigger>     <refresh-control @refresh="refresh" :trigger="$els.trigger" :refreshing="refreshing"></refresh-control>     <content-block>       <p class="refresh-desc">          按住 - 下拉 - 释放可以刷新数据       </p>     </content-block>     <list>       <item-cell v-for="item in items">         <item-title>           {{item}}         </item-title>       </item-cell>     </list>   </content> </div> </template>[removed]export default {  data () {    return {      items: ['1', '2', '3', '5', '6', '7', '8', '9', '10'],      end: 10,      refreshing: false    }  },  methods: {    back () {      window.history.back()    },    refresh () {      this.refreshing = true      setTimeout(() => {        this.refreshing = false        var arr = []        for (let i = this.end; i < this.end   10; i ) {          arr.push(String(i   1))        }        this.end  = 10        this.items = arr      }, 2000)    }  }}[removed]<style lang="less">.refresh-desc{  text-align: center;}</style>效果如下 标签：VueCarbon
MaterialDesign风格的Vuejs轻量UI组件库
08-10
Rubik UI 是一个基于 Vue.js 2.0 的开源 UI 组件库，在交互和视觉设计上遵循 Material Design 规范，适用于 PC 端和 mobile 端。
vuetify框架api和doc
03-04
由于公司禁止访问github，所以只能在家里把vuetify的api和源码下载下来，方便在公司查看源码和api
VueMaterial是根据MaterialDesign规范构建的轻量级框架
08-10
Vue Material是根据Material Design规范构建的轻量级框架
VueMaterialAdminTemplate是一个基于Vue的MaterialDesign后台管理模板
08-12
Vue Material Admin Template是一个基于Vue的Material Design后台管理模板，使用Vuetifyjs作为基础的框架。
Material Design风格笔记应用
04-04
这个源码是一个Material Design风格笔记应用源码案例，源码material-notes，Material Design风格的笔记app，该项目需要依赖RoboGuice，floating-action-button，appcompat 两个项目，因此编译起来比较困难，不太适合...
vuetify(UI框架)
weixin_41249041的博客
04-21 9324
Vue负责视图的渲染（模型和视图双向绑定），UI框架提供样式（外观显示）。 与Vue吻合的UI框架比较知名的： element-ui：饿了么出品 i-view：某公司出品 推荐的是一款国外的框架：Vuetify 官方网站：https://vuetifyjs.com/zh-Hans/ Vuetify优点： 几乎不需要任何CSS代码，而element-ui许多布局样式需要我们...
J2EE神框架
技术小师傅
10-25 170
SpringBoot框架由来: SpringBoot其实是由Spring升级而来，那Spring又是什么呢? 这个就是老历史了，在十几年前，JavaEE在企业级应用中可谓是跟.Net框架分庭抗礼，是当时开发大型项目应用中必不可少的选择。 JavaEE只是一套协议标准，本身其实不是实打实的框架，支持JavaEE协议的当时几个框架中，有Struts,Spring,等等。这其中Spring是最大而全的，完全面向对象，架构设计思路领先，它包含了Spring ORM,SpringMVC,Spring AOP等构件。
什么是Material Design 风格
09-14
Material Design 风格是一种由Google推出的设计风格，旨在为移动设备和web应用程序提供一致且有吸引力的用户界面设计。它的设计理念主要基于实物（material）的触感和运动效果，并将这些概念应用到数字界面设计中。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值