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類名中添加相應的類名就可以引入相關的動畫