仿小米商城1

准备工作

安装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框架（国内特别火的框架）