uni-app教程二（微信开发者工具运行项目，icon字体使用，组件）(1)

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

line-height: 112rpx;

}

.list .title-icon {

width: 48rpx;

flex-grow: 0;

margin-right: 24rpx;

position: relative;

}

.list .title-icon image {

width: 48rpx;

height: 48rpx;

position: absolute;

top: 50%;

transform: translateY(-50%);

}

.list .right {

display: flex;

flex-grow: 1;

justify-content: space-between;

position: relative;

line-height: 112rpx;

}

.list .bottom::after {

content: ‘’;

height: 1px;

width: 100%;

display: block;

position: absolute;

bottom: 0;

left: 0;

background-color: #E8ECED;

transform: scaleY(0.5);

}

.list .right text {

font-size: 34rpx;

color: rgba(53,53,54,1);

}

2. 父组件我的页面my.vue，引入自定义组件list.vue，并传参

最终效果：

3. uni-ui的使用

1）uni-ui 是全端兼容的基于flex布局的ui库；

2）可以使用 npm 的安装使用方式，也可下载相关组件直接使用；

3）uni-ui

不支持使用 Vue.use() 的方式安装

4）uni-ui 依赖 scss，若是 HBuilderX 中创建的 uni-app

项目，需要在 HBuilderX 中安装 scss 插件；如果是使用 cli 创建的 uni-app 项目，需要在项目下npm安装node-sass 和 sass-loader

1. 初始化项目

在 HBuilderX 中新建 uni-app 项目，进入项目目录，执行：

npm init -y

2. 安装 uni-ui

npm install @dcloudio/uni-ui

3. 使用 uni-ui

index.vue引入组件，在template中使用

helloword

<uni-pagination

show-icon=false

total=100

pageSize=10

current=2

prev-text=“上一页”

next-text=“下一页”

按需引入

import uniCard from “…/…/uni-ui/uni-card/uni-card.vue”

import uniPagination from “@/uni-ui/uni-pagination/uni-pagination.vue”

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】