一些热门的前端UI组件库(附用例)

最新推荐文章于 2024-05-06 11:55:06 发布

一个平凡de人

最新推荐文章于 2024-05-06 11:55:06 发布

阅读量7.7k

点赞数 3

分类专栏： web开发文章标签：前端 ui javascript

本文链接：https://blog.csdn.net/weixin_46703850/article/details/121100042

版权

1.Vuetify（Vue）

Vuetify 官网
是一个纯手工精心打造的 Material 样式的 Vue UI 组件库。不需要任何设计技能 — 创建叹为观止的应用程序所需的一切都触手可及。
这是世界上最流行的 Vue.js 框架

CDN 的用例:
尽管我们不赞成在生产环境中使用CDN这种方式 —— 无论实际使用哪些组件，客户端必须下载整个库，而这将会影响到整体性能和带宽利用率/
学习使用

<!DOCTYPE html>
<html>
	<head>
		<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
		<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
		<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
		<!--引入css代码-->
		<link href="index.css" rel="stylesheet">
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
	</head>
	<body>
		<!--html代码-->
		<div id="app">
		  <v-app id="inspire">
		    <div>
		      <v-alert
		        border="left"
		        color="blue"
		        dark
		      >
		        我要个左边框吧
		      </v-alert>
		      
		</div>
		<!--html代码 END-->
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
		<!--引入js代码-->
		<script