uniapp如何引入官方的css样式库

uniapp引入css样式、图标库、动画库

uniapp如何引入官方的css样式库

1.项目目录新建一个common的文件夹

common一般存放的是项目引入的一个css和js样式库

2.将样式库的css或者js复制到common文件夹

3.在App.vue中引入需要的样式库

<script>
export default {
	onLaunch: function() {
		console.log('App Launch');
	},
	onShow: function() {
		console.log('App Show');
	},
	onHide: function() {
		console.log('App Hide');
	}
};
</script>

<style>
/*每个页面公共css */
/* 引入hello模板公共样式库 */
@import './common/uni.css';
/* 引入animate动画库 */
@import './common/animate.css';
/* 引入图标 */
@import './common/icon.css';
</style>

4.注意事项

如果引入的是hello模板里面的uni.css样式库，则还需要拷贝static文件夹下的后缀名为.ttf的文件
相应创建一个static文件夹，将文件放置到文件夹中，否则启动项目会报错。
原因：uni.css中引入了uni.ttf
@font-face {
	font-family: uniicons;
	font-weight: normal;
	font-style: normal;
	src: url('~@/static/uni.ttf') format('truetype');
}

uniapp如何引入的css图标库

1.进入https://www.iconfont.cn/阿里巴巴矢量图标库

2.如何下载图标

选择你要使用的图标，点击购物车，加入完成后点击右上角购物车按钮，然后进入点击添加至项目
取一个项目名然后进去之后会默认选择unicode，选择右边的下载至本地，然后下载过后解压文件
里面有个iconfont.css文件拷贝到项目文件common文件夹中
App.vue中@import './common/iconfont.css';

3.如何使用图标

解压的压缩包中有一个html文件，将html文件打开，里面有显示的图标，F12审查元素
选择你要使用的图标，点击它，在底部查看他的类名，复制他的类名到项目标签中，即可使用。

uniapp如何引入的css动画库

1.进入https://daneden.github.io/animate.css/

2.点击下方的下载

3.下载好之后右键另存为animate.css将其复制到common文件夹中

4.在App.vue中引入（同上）

5.在class类名中添加相应的类名就可以引入相关的动画