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动画库 */
animate下载安装@import './common/animate.css';
/* 引⼊图标 */
@import './common/icon.css';
</style>
4.注意事项
如果引⼊的是hello模板⾥⾯的uni.css样式库，则还需要拷贝static⽂件夹下的后缀名为.ttf的⽂件
相应创建⼀个static⽂件夹，将⽂件放置到⽂件夹中，否则启动项⽬会报错。
原因：uni.css中引⼊了f
@font-face {
font-family: uniicons;
font-weight: normal;
font-style: normal;
src: url('~@/f') format('truetype');
}
uniapp如何引⼊的css图标库
2.如何下载图标
选择你要使⽤的图标，点击购物车，加⼊完成后点击右上⾓购物车按钮，然后进⼊点击添加⾄项⽬
取⼀个项⽬名然后进去之后会默认选择unicode，选择右边的下载⾄本地，然后下载过后解压⽂件
⾥⾯有个iconfont.css⽂件拷贝到项⽬⽂件common⽂件夹中
App.vue中@import './common/iconfont.css';
3.如何使⽤图标
解压的压缩包中有⼀个html⽂件，将html⽂件打开，⾥⾯有显⽰的图标，F12审查元素
选择你要使⽤的图标，点击它，在底部查看他的类名，复制他的类名到项⽬标签中，即可使⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。