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

作者：黑客灵魂 | 2024-07-19 20:27:28

踩

materialdesignicons.min.css

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/853361