准备工作
安装Hbuilder
tips:
官网里有一个高效开发技巧,有很多快捷键可以提高效率。
注意Hbuilder点击右键新建页面时,会自动建立一个同名的文件目录
当新建一个页面后,page中会自动加入该页面目录
开始开发
引入全局公共样式
项目下面新建目录common,用于引入四个公共样式
animate.css用于实现动画效果,animate中文官网
uni.css为官方ui库,可以通过uniapp模板获取:新建项目
由于新版本的uni.css引入的是本地的uni.ttf,所以我们需要把ttf文件复制到我们的项目的static目录下面
icon.css为图标库,有的时候,官方图标库不能满足我们的需要,此时就需要引入第三方图标库,此时我们先新建一个空白css文件
common.css为公共样式,先新建一个空白文件
打开App.vue文件,把这几个文件引入进来
引入动画样式和外部图标库
动画样式
使用animate,步骤:
class中加入animate,需要什么效果可在官网看演示,这里我使用的是bounceIn,速度为fast
在index.vue界面添加v-if的判断,show为true才会显示
show值默认为false
外部图标
选择图标-放到库里-添加到项目(若没有项目,新建一个)-下载
解压后是以下目录
注意:url结尾的逗号改为分号并加上花括号,src: 不能删除
剩余部分,全选复制(ctrl+a, ctrl+c)到icon.css中。
返回字体图标的文件夹中,打开html文件
封装UI基础库
ui基础库,把常用的样式封装起来:
颜色(背景颜色,边框颜色,文本颜色)
布局
边框
内边距
外边距
字体大小
行高
flex布局
bootstrap框架(国内特别火的框架)